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

我的問題是與嵌套。我的嵌套基於2個鍵，先行（用於生成行），然後對於每行，列有多個嵌套鍵，每個鍵都包含我的分數。 我不知道如何着手，即環比列，並與

任何幫助，將不勝感激

Answer 1

雖然你可以使用的顏色添加矩形組成的subselect（見d3.js building a grid of rectangles）與嵌套數據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來計算你的熱圖正方形的正確位置。