个人中心
gpt4 book ai didi

javascript - 如何使用 D3 更新热图中的文本？

转载 作者：行者123 更新时间：2023-11-28 16:49:54 24 4
gpt4 key购买 nike

我根据 this example 创建了一个 D3 热图，并为其编写了一个更新函数。这是基本热图的相关代码:

<!DOCTYPE html>
<html lange = "en">
<head>
    <meta charset="UTF-8">
    <title>Heatmap</title>
    <script type ="text/javascript" src="d3/d3.v3.js"></script>
    <script type ="text/javascript" src="updateHeatmap.js"> </script>
    <style type ="text/css">  

    .btn { 
        display: inline; 
    }


        rect.bordered {
        stroke: #E6E6E6;
        stroke-width:2px;   
      }

      text.mono {
        font-size: 9pt;
        font-family: Consolas, courier;
        fill: #aaa;
      }

      text.axis-workweek {
        fill: #000;
      }

      text.axis-worktime {
        fill: #000;
      }</style>
</head>


<body>

    <div id="n1" class="btn">
        <input name="updateButton" 
               type="button" 
               value="1" 
        />
    </div>
    <div id="n2" class="btn">
        <input name="updateButton" 
               type="button" 
               value="2" 
        />
    </div>



    <div id="chart"></div>
    <script type="text/javascript">
    var margin = {top:50, right:0, bottom:100, left:30},
        width=960-margin.left-margin.right,
        height=430-margin.top-margin.bottom,
        gridSize=Math.floor(width/24),
        legendElementWidth=gridSize*2.665,
        buckets = 10,
        colors = ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"],
        days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
    times = ["12am", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am", "11am", "12am", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"];

    var heatmap;
    var legend;

    var svg = d3.select("#chart").append("svg")
        .attr("width",width + margin.left+margin.right)
        .attr("height", height+margin.top+margin.bottom)
        .append("g")
        .attr("transform", "translate("+ margin.left+","+margin.top+")");

    d3.csv("1.csv", function(d){
        return {
            day:+d.day2,
            hour:+d.hour,
            value:+d.per_day_per_hour
            };
        },
        function(error, data){

            console.log(data);

            var colorScale = d3.scale.quantile()
                .domain([0, (d3.max(data, function(d){return d.value;})/2), d3.max(data, function(d){return d.value;})])
                .range(colors);


            var dayLabels = svg.selectAll(".dayLabel")
                .data(days)
                .enter().append("text")
                .text(function (d) {return d; })
                .attr("y", function (d, i){ return i*gridSize;})
                .style("text-anchor", "end")
                .attr("transform", "translate(-6," + gridSize/1.5+")")
                .attr("class", function(d, i) { return ((i>=0 && i<=4) ? "dayLabel mono axis axis-workweek": "dayLabel mono axis"); });

            var timeLabels = svg.selectAll(".timeLabel")
                .data(times)
                .enter().append("text")
                .text(function(d){return d;})
                .attr("x", function(d,i) {return i * gridSize;})
                .attr("y",0)
                .style("text-anchor", "middle")
                .attr("transform", "translate(" + gridSize/2+", -6)")
                .attr("class", function(d, i) { return ((i>=9 && i<= 17) ? "timeLabel mono axis axis-worktime": "timeLabel mono axis"); });

            var heatMap = svg.selectAll(".hour")
                .data(data)
                .enter().append("rect")
                .attr("x", function(d) {return (d.hour) * gridSize;})
                .attr("y", function(d) {return (d.day) * gridSize;})
                .attr("rx", 4)
                .attr("ry", 4)
                .attr("class", "hour bordered")
                .attr("width", gridSize)
                .attr("height", gridSize)
                .style("fill", colors[0]);

            heatMap.transition().duration(1000)
                .style("fill", function(d){ return colorScale(d.value);});

            heatMap.append("title").text(function(d) {return d.value;});

            var legend = svg.selectAll(".legend")
                .data([0].concat(colorScale.quantiles()), function(d) {return d;})
                .enter().append("g")
                .attr("class", "legend");

            legend.append("rect")
                .attr("x", function(d, i){ return legendElementWidth * i;})
                .attr("y", height)
                .attr("width", legendElementWidth)
                .attr("height", gridSize/2)
                .style("fill", function(d, i) {return colors[i]; });

            legend.append("text")
                .attr("class", "mono")
                .text(function(d) {return "≥ "+d.toString().substr(0,4);})
                .attr("x", function(d, i){ return legendElementWidth *i;})
                .attr("y", height+ gridSize);



            d3.select("#n1")
                .on("click", function() {
                    updateHeatmap("1_1.csv");
                });


            d3.select("#n2")
                .on("click", function() {
                    updateHeatmap("1_2.csv");
                });     

        ;       
        }
);
</script>

<script>

</script>

</body>
</html>

上面的代码与我在顶部链接的 fiddle 中的代码基本相同，除了它包含 2 个按钮，并且有图例，svg , 以及全局声明的热图变量。

这是我的问题的核心，它与我创建的用于加载两个新 CSV 的更新函数有关:

function updateHeatmap(x){
    svg.selectAll(".legend").attr("opacity", 0);
    d3.csv(x, function(d){
        return {
            day:+d.day2,
            hour:+d.hour,
            value:+d.per_day_per_hour
            };
        },

        function(error, data){


        colorScale = d3.scale.quantile()
            .domain([0, (d3.max(data, function(d){return d.value;})/2), d3.max(data, function(d){return d.value;})])
            .range(colors);


        var heatMap = svg.selectAll(".hour")
            .data(data)
            .transition().duration(1000)
            .style("fill", function(d){ return colorScale(d.value);});

        heatMap.selectAll("title").text(function(d) {return d.value;});

        var legend = svg.selectAll(".legend")
            .data([0].concat(colorScale.quantiles()), function(d) {return d;})
            .enter().append("g")
            .attr("class", "legend");

        legend.append("rect")
            .attr("x", function(d, i){ return legendElementWidth * i;})
            .attr("y", height)
            .attr("width", legendElementWidth)
            .attr("height", gridSize/2)
            .style("fill", function(d, i) {return colors[i]; });

        legend.append("text")
            .attr("class", "mono")
            .text(function(d) {return "≥ "+d.toString().substr(0,4);})
            .attr("x", function(d, i){ return legendElementWidth *i;})
            .attr("y", height+ gridSize);



        }
    )
}

我已经设法更新了热图方 block 的颜色 (huzah)，但是无法让位于热图下方的图例配合，也无法像我一样让每个方 block 下面的值在悬停时显示在初始加载时做了。我感觉这是因为我的 JS 非常不稳定(事实上，让我们面对现实吧，我的 D3)，但不能确定——我认为这可能与我搞砸了选择文本元素的适当语法有关(即，我不确定如何以正确的方式做到这一点)。

总结:this heatmap (here's the gist block)中的图例没有正确更新，并且每个方 block 的悬停值都没有出现在更新中。哎呀。有什么建议吗？

最佳答案

我更新了我的示例以允许在数据集之间切换 - 这应该会有所帮助。

http://bl.ocks.org/tjdecke/5558084

关于javascript - 如何使用 D3 更新热图中的文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32733476/

24 4 0
文章推荐： python 滚动解决方法
文章推荐： html - 为什么模态背景与我的弹出模态重叠甚至设置了 !important 和 z-index？如何解决？
文章推荐： javascript - 调用子元素事件
文章推荐： python - 在 pygame 物理模拟中添加 wxPython GUI 元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com