如何使用D3.js根据json中给出的数据在Heatmap中创建可变大小的矩形

How to create rectangles of variable size in Heatmap according to data given in json using D3.js?

本文关键字：创建 Heatmap 数据 json 根据 js 何使用 D3 更新时间：2023-09-26

我制作了一个Heatmap，它通过颜色强度来表示值。如何创建一个Heatmap，其中矩形大小将用于表示json中的值？我尝试了以下代码，但没有给出所需的输出。

 <body>
<div id="chart"></div>
<div id="dataset-picker">
</div>
<script type="text/javascript">
 var width=400,
     height=300,
     buckets=9,
     colors = ["#ccd9ff", "#99b3ff", "#668cff", "#3366ff", "#0040ff", "#0033cc", "#002699", "#002080", "#00134d"],
      datasets = [{
                 "day": 1,
                 "hour": 1,
                  "value1":16,
                  "value2":20
                  },
                  {
                      "day": 1,
                      "hour": 2,
                      "value1":23,
                      "value2":10
                  },
                  {
                      "day": 1,
                      "hour": 3,
                      "value1":13,
                      "value2":12
                  } 

               ];

       var canvas=d3.select("#chart").append("svg")
                   .attr("width",width)
                   .attr("height",height)
                   .append("g")

       var colorScale = d3.scale.quantile()
                .domain([0, buckets - 1, d3.max(datasets, function (d) { return d.value2; })])
                .range(colors);

        var squares=canvas.selectAll("rect")
                     .data(datasets)
                     .enter()
                         .append("rect")
                          .attr("x", function (d,i) {return (i)* d.value1})
                          /*.attr("y",function (d,i) { return (i-1)* d.value2})*/
                          .attr("width",function(d){return d.value1 *10 })
                          .attr("height",function(d){return d.value2*10})
                          .attr("class", "hour bordered")
                          .style("fill", colors[0]);                          



</script>

我想你的意思是这样的：http://jsfiddle.net/bc4um7pc/315/

您定义颜色范围：

var colorScale = d3.scale.quantile()
                .domain([0, buckets - 1])
                .range(colors);

然后从该范围中选择一种颜色，并从数据集中选择一个值：

.style("fill", function(d){return colorScale(d.value1);});

由于范围是从0到buckets-1=8，没有一个d.value1与范围匹配，所以我将1个value1更改为3，这样您就可以看到差异。