使用d3绘制热图 [英] Drawing heatmap with d3

问题描述

我想使用csv中的数据使用d3绘制热图：

b
$ b

  row，col，score 
 0,0,0.5 
 0,1,0.7 
 1,0， 0.2 
 1,1,0.4 
  

我有一个svg和代码如下：

 < svg id =heatmap-canvasstyle =height：200px>< / svg> 
 
< script> 
 d3.csv（sgadata.csv，function（data）{
 data.forEach（function（d）{
 d.score = + d.score; 
 d .row = + d.row; 
 d.col = + d.col; 
}）; 
 //热图中每一行的高度
 //每个宽度column in the heatmap 
 var h = gridSize; 
 var w = gridSize; 
 var rectPadding = 60; 
 
 $（'＃heatmap-canvas'）。 （）; 
 
 var mySVG = d3.select（＃heatmap-canvas）
 .style（'top'，0）
 .style（'left'，0 ）; 
 
 var colorScale = d3.scale.linear（）
 .domain（[ -  1，0，1]）$ ​​b $ b .range（[colorLow，colorMed，colorHigh] ）; 
 
 rowNest = d3.nest（）
 .key（function（d）{return d.row;}）
 .key（function（d）{return d .col;}）; 
 
 dataByRows = rowNest.entries（data）; 
 mySVG.forEach（function（）{
 var heatmapRow = mySVG.selectAll（。heatmap ）
 .data（dataByRows，function（d）{return d.key;}）
 .enter（）。append（g）; 
 
 //行，基于列生成矩形 - 这是我遇到的
 heatmapRow.forEach（function（）{
 var heatmapRects = heatmapRow 
 .selectAll（。rect）
 .data（function（d）{return d.score;}）
 .enter（）。append（svg：rect）
 .attr（'width'，w）
。 attr（'height'，h）
 .attr（'x'，function（d）{return（d.row * w）+ rectPadding;}）
 .attr（'y'，function d）{return（d.col * h）+ rectPadding;}）
 .style（'fill'，function（d）{
 if（d.score == NaN）{return colorNA;} 
 return colorScale（d.score）; 
}）
 
}）
< / script> 
  

我的问题是嵌套。我的嵌套是基于2个键，行首（用于生成行），然后对于每一行，有多个嵌套键的列，每个都包含我的分数。
我不知道如何继续，即循环列和添加颜色的矩形

任何帮助将不胜感激

<虽然你可以使用子选择（参见 d3.js构建矩形网格）使用 d3 在这种情况下它不是真正需要的。我在 http://jsfiddle.net/QWLkR/2/ 上提供了一个使用您的数据的示例。这是关键部分：

  var heatMap = svg.selectAll（。heatmap）
 .data ，function（d）{return d.col +'：'+ d.row;}）
 .enter（）。append（svg：rect）
 .attr （d）{return d.row * w;}）
 .attr（y，function（d）{return d.col * h;}）
 .attr （d）{return w;}）
 .attr（height，function（d）{return h;}）
 .style 。得分了）; }）; 
  

基本上你可以使用行 col 来计算热图中正方形的正确位置。

I am trying to draw a heatmap with d3 using data from a csv: this is what I have so far

Given a csv file:

row,col,score
0,0,0.5
0,1,0.7
1,0,0.2
1,1,0.4

I have an svg and code as follows:

<svg id="heatmap-canvas" style="height:200px"></svg>

<script>
d3.csv("sgadata.csv", function(data) {
    data.forEach(function(d) { 
    d.score = +d.score;
    d.row = +d.row;
d.col = +d.col;
});
//height of each row in the heatmap
//width of each column in the heatmap
var h = gridSize;
var w = gridSize;
var rectPadding = 60;

$('#heatmap-canvas').empty();

var mySVG = d3.select("#heatmap-canvas")
.style('top',0)
.style('left',0);

var colorScale = d3.scale.linear()
.domain([-1, 0, 1])
.range([colorLow, colorMed, colorHigh]);

rowNest = d3.nest()
.key(function(d) { return d.row; })
.key(function(d) { return d.col; });

dataByRows = rowNest.entries(data);
mySVG.forEach(function(){
var heatmapRow = mySVG.selectAll(".heatmap")
    .data(dataByRows, function(d) { return d.key; })
    .enter().append("g");

    //For each row, generate rects based on columns - this is where I get stuck
    heatmapRow.forEach(function(){
    var heatmapRects = heatmapRow
        .selectAll(".rect")
        .data(function(d) {return d.score;})
        .enter().append("svg:rect")
                    .attr('width',w)
        .attr('height',h)
        .attr('x', function(d) {return (d.row * w) + rectPadding;})
        .attr('y', function(d) {return (d.col * h) + rectPadding;})
        .style('fill',function(d) {
            if(d.score == NaN){return colorNA;}
            return colorScale(d.score);
                 })

})
</script>

My problem is with the nesting. My nesting is based on 2 keys, row first (used to generate the rows) then for each row, there are multiple nested keys for the columns and each of these contain my score. I am not sure how to proceed i.e. loop over columns and add rectangles with the colors

Any help would be appreciated

解决方案

While you could used a subselect (see d3.js building a grid of rectangles) to work with nested data in d3 it's not really needed in this case. I put together an example using your data at http://jsfiddle.net/QWLkR/2/. This is the key part:

var heatMap = svg.selectAll(".heatmap")
    .data(data, function(d) { return d.col + ':' + d.row; })
  .enter().append("svg:rect")
    .attr("x", function(d) { return d.row * w; })
    .attr("y", function(d) { return d.col * h; })
    .attr("width", function(d) { return w; })
    .attr("height", function(d) { return h; })
    .style("fill", function(d) { return colorScale(d.score); });

Basically you can just use the row and col to calculate the correct position of the squares in your heatmap.

这篇关于使用d3绘制热图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！