D3。多个元素可以与单个基准相关联吗？

Question

典型的D3成语如下所示：

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")

这将一个数据与一个元素(SGV、div等)关联起来。是否可以将多个元素与数据关联起来，然后根据与单个数据关联的元数据以稍微不同的方式呈现它们。

在我的例子中，我有一个直方图d3.layout.histogram。每个直方图bin是一个由子块组成的聚合值。我想呈现聚合，然后呈现在聚合之上的子部分。

我不喜欢为每个子块创建单独的直方图。

有可能吗？

Answer 1

正如@mark在他的评论中提到的那样，可以使用嵌套选择实现所期望的行为。

Mike Bostock的基本示例如下：

var matrix = [
  [ 0,  1,  2,  3],
  [ 4,  5,  6,  7],
  [ 8,  9, 10, 11],
  [12, 13, 14, 15],
];
var td = d3.selectAll("tbody tr")
  .data(matrix)
.selectAll("td")
  .data(function(d, i) { return d; }); // d is matrix[i]

首先，将数据绑定到“父元素”，这是本例中的tr。数组matrix中的每个元素将被分配给一个tr元素。

在tr元素中，您可以选择子片段，并通过调用带有函数作为参数的data()来分配相应的数据。这样，在每个tr内部就会有四个td元素，并分配给它相应的编号。

要实际追加元素并在表中显示数字，您可以执行以下操作：

var matrix = [
  [ 0,  1,  2,  3],
  [ 4,  5,  6,  7],
  [ 8,  9, 10, 11],
  [12, 13, 14, 15],
];
var table = d3.select("body").append("table");

var tr = table.selectAll("tr")
  .data(matrix)
.enter().append("tr");

var td = tr.selectAll("td")
  .data(function(d) { return d; })
.enter().append("td").text(function(d){return d;});