使用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元素），然後創建該矩形熱圖。