Question

我制作了一个热图，用颜色强度表示值。如何创建一个热图，其中矩形的大小将用于表示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>

Answer 1

我认为你的意思是这样的：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到桶-1 = 8，所以d.value1都没有匹配范围所以我将1 value1更改为3，这样您就可以看到差异

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

1 个答案: