Vẽ Heatmap với d3

Question

Tôi cố gắng để vẽ một bản đồ nhiệt với d3 sử dụng dữ liệu từ một csv: đây là những gì tôi có cho đến nay

Cho một tập tin csv:

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

Tôi có một svg và mã như sau:

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

Vấn đề của tôi là làm tổ. Làm tổ của tôi dựa trên 2 khóa, hàng đầu tiên (được sử dụng để tạo ra các hàng) sau đó cho mỗi hàng, có nhiều khóa lồng nhau cho các cột và mỗi khóa chứa điểm số của tôi. Tôi không chắc chắn làm thế nào để tiến hành tức là vòng qua cột và thêm hình chữ nhật với các màu sắc

Bất kỳ trợ giúp sẽ được đánh giá

Answer 1

Trong khi bạn có thể sử dụng một subselect (xem d3.js building a grid of rectangles) để làm việc với dữ liệu lồng nhau trong d3 nó không thực sự cần thiết trong trường hợp này. Tôi đã đưa ra một ví dụ sử dụng dữ liệu của bạn tại http://jsfiddle.net/QWLkR/2/. Đây là phần quan trọng:

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

Về cơ bản bạn chỉ có thể sử dụng row và col để tính toán đúng vị trí của các hình vuông trong Heatmap của bạn.