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

你的问题有两个来源：

您为每个嵌套组插入一个svg元素，但您没有为每个元素定义一个位置（所有元素都在正文中）。
您正在选择正文中的所有svg元素，并为每个数据元素附加一个矩形，而不考虑嵌套结构。

一种解决方案是在体内创建一个svg元素，每个板一个组，为每个板定义一个位置，将组转换到它的位置（在svg元素中），然后为热图创建矩形。 / p>

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

1 个答案: