使用D3.js（热图）嵌套数据

Question

所以我是新来使用JavaScript（特别是D3库），我试图做一些不像下面的例子：http://mbostock.github.com/d3/talk/20111116/iris-splom.html。在我的情况下，虽然每个单元格都是相同的东西，但是具有完全相同比例的4 x 4网格。

所以在我的情况下，顶层元素是一个板。每个板块在行和列的交叉处具有行和列值（如果您愿意的话，可以使用热图）。我能够创建适当的板元素;然而，所有板块的数据都存在于每个元素下，而不是正确嵌套。我试图附加一个图像，以便您可以看到每个“板”是相同的，如果您查看底层文档结构，它是相同的，并且基本上每个矩形都是两个重叠的数据点。

在仔细观察Mike的示例（上面的链接）中，看起来他使用交叉函数来帮助嵌套数据，我在想如果这是我的代码崩溃的地方。感谢您提供的所有帮助。

我已张贴下面

d3.csv("plateData.csv", function(data) { 

    var m = 20, 
     w = 400, 
     h = 300, 
     x_extent = d3.extent(data, function(d){return d.Rows}), 
     y_extent = d3.extent(data, function(d){return d.Columns}), 
     z_extent = d3.extent(data, function(d){return d.Values}); 


     var x_scale = d3.scale.linear() 
      .range([m, w-m]) 
      .domain(x_extent) 
     var y_scale = d3.scale.linear() 
      .range([h-m,m]) 
      .domain(y_extent) 

     var ramp=d3.scale.linear() 
       .domain(z_extent) 
       .range(["blue","red"]); 

    // Nest data by Plates 
    var plates = d3.nest() 
     .key(function(d) { return d.Plate; }) 
     .entries(data); 


    // Insert an svg element (with margin) for each plate in our dataset. 
var svg = d3.select("body").selectAll("svg") 
     .data(plates) 
     .enter().append("svg:svg") 
     .attr("width", w) 
     .attr("height", h) 
//add grouping and rect 
    .append("svg:g") 
    .selectAll('rect') 
      .data(data) 
      .enter() 
    .append('svg:rect') 
      .attr('x', function(d){return x_scale(d.Rows)}) 
      .attr('y', function(d){return y_scale(d.Columns)}) 
      .attr('width', 10) 
      .attr('height', 10) 
      .style('fill', function(d){return ramp(d.Values)}); 
    } 
); 

和示例数据我的代码：

Plate,Rows,Columns,Values 
12345,1,1,1158.755 
12345,1,2,1097.768 
12345,1,3,1097.768 
12345,1,4,914.807 
12345,2,1,1189.249 
12345,2,2,1128.261 
12345,2,3,1433.197 
12345,2,4,701.352 
12345,3,1,914.807 
12345,3,2,1433.197 
12345,3,3,1189.249 
12345,3,4,1402.703 
12345,4,1,1158.755 
12345,4,2,1067.274 
12345,4,3,701.352 
12345,4,4,1372.21 
56987,1,1,20.755 
56987,1,2,97.768 
56987,1,3,97.768 
56987,1,4,14.807 
56987,2,1,89.249 
56987,2,2,28.261 
56987,2,3,33.197 
56987,2,4,15.352 
56987,3,1,2000.807 
56987,3,2,14.197 
56987,3,3,89.249 
56987,3,4,402.703 
56987,4,1,158.755 
56987,4,2,3067.274 
56987,4,3,701.352 
56987,4,4,182.21 

Answer 1

你的问题有两个来源：

1. 要插入一个SVG元素给每个嵌套组，但是您没有为每个元素定义一个位置（所有元素都在主体中）。

2. 您正在选择主体中的所有svg元素，并为每个数据元素添加一个矩形，而不考虑嵌套结构。

一种解决方案是创建身体内的一个svg元素，一组用于每个板，限定用于每个板的位置，所述基团转化为它的位置（在svg元素），然后创建该矩形热图。