Question

我有以下代码;

var matrix = [
  [ 1, 2, 3, 4],
  [ 5, 6, 7, 8]
];

var tr = d3.selectAll("td.sparkline").append("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; });

执行以下操作的正确方法是什么;

<td class="sparkline">matrix[0]</td>
<td class="sparkline">matrix[1]</td>

我可以为容器使用相同的类吗？我继续在两行中获得两个数组。

我在这里读到了嵌套 http://bost.ocks.org/mike/nest/ 但我还是想不出来。

Answer 1

目前还不清楚你要在这里完成什么。您是否在DOM中已经有一个td元素，其中类"sparkline"已经存在，并且您正在尝试在其中添加新表？或者你想在其他地方换一张新桌子？你想在矩阵中每个数字一个单元格，或矩阵中每行一个单元格吗？

这个小提琴说明了上述选择：http://jsfiddle.net/nrabinowitz/ma7Dn/

在第一个版本中，代码就像您提供的一样，并且DOM中有一个现有的表，其中包含td.sparkline元素以附加新内容。结果是td内的新表，行和单元格对应于矩阵结构。

在第二个版本中，我们将一个新表附加到另一个元素，矩阵中每行一行，每行一个单元格：

  var tr2 = d3.select("#v2").append("table").selectAll("tr")
    .data(matrix)
  .enter().append("tr").append("td")
    .attr("class", "sparkline")
    .text(function(d) { return d.join(", "); });

第一个版本按照预期使用您自己的代码工作，所以我假设这不是您想要的。我的猜测是你的初始选择器td.sparkline是造成混乱的原因;如果那不是引用DOM中已有的东西，那么这里就是错误。

Answer 2

想出来......

d3.selectAll('td.sparkline')
.data(matrix)
.text(function(d, i)
   { return 'Result #' + (i + 1) + ': ' + d; // i is 0-based.
});

使我能够将每个索引添加到正确的行。这个链接非常有用; http://code.hazzens.com/d3tut/lesson_1.html

D3 - 嵌套来自同一数据集的多个图表

2 个答案: