使用d3绘制热力图

Question

我正在尝试使用来自csv的数据用d3绘制热力图：这是我迄今为止的成果。

给定一个csv文件：

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

我有一个SVG和以下代码：

<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>

我的问题在于嵌套。我的嵌套基于两个键，首先是行（用于生成行），然后对于每一行，都有多个嵌套的列键，每个列键都包含我的分数。 我不确定如何继续，即循环遍历列并添加具有颜色的矩形。

如果有帮助，将不胜感激。

- Omar Wagih

Answer 1

虽然您可以使用子查询（请参见d3.js构建矩形网格）来处理 d3 中的嵌套数据，但在这种情况下并不是真正需要的。我使用了您的数据创建了一个示例，位于http://jsfiddle.net/QWLkR/2/。这是关键部分：

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); });

基本上你只需使用row和col来计算热力图中方块的正确位置。

- Bill

---

抱歉延期了。我不确定是否应该将此作为新问题发布，但是否有一种方法可以调整矩形的大小，使其适合放置在其中的 div 中？如果 div 没有预定义的宽度（即根据屏幕大小而变化）呢？ - Omar Wagih

必须设置某些内容，以便您可以计算出 div 的正确大小。可以是 div 的大小或窗口的大小。没有办法在不设置 SVG 容器的高度和宽度的情况下绘制 SVG 图像。 - Bill

我在最新版本的Firefox中没有看到任何空格，所以似乎是您正在使用的版本的渲染问题。您可以尝试在CSS中为单元格添加shape-rendering: crispEdges;。 - Bill

这是在Chrome上的样子：http://i.imgur.com/wbyJs.png，而在Firefox上则是：http://i.imgur.com/r9UH8.png。我会尝试使用清晰的边缘。 - Omar Wagih

我会开一个新的问题，不确定 FireFox 在那里做什么。 - Bill