Question

规范的D3习语看起来像这样：

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

这会将一个数据与一个元素（SGV，div，无论如何相关联。）。是否可以将多个元素与基准相关联，然后根据与单个基准相关联的元数据以略微不同的方式呈现它们。

在我的情况下，我有一个直方图d3.layout.histogram。每个直方图箱是由子件组成的聚合值。我想渲染聚合然后渲染聚合顶部的子片段。

我不想为每个子片段创建单独的直方图。

可能的？

Answer 1

正如@mark在评论中已经提到的那样，可以使用nested selections来实现所期望的行为。

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]

首先，将数据绑定到＆＃34;父元素＆＃34;，在此示例中为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;});

D3。可以将多个元素与单个数据相关联吗？

1 个答案: