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

AND 示例数据：

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 元素中），然后为热图创建矩形。