0

我有以下代码；

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/ 但我仍然无法弄清楚。

4

2 回答 2

0

弄清楚了...

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

于 2013-07-07T19:35:00.470 回答
0

目前尚不清楚您要在这里完成什么。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 中已经存在的东西，那么这里就是一个错误。

于 2013-07-07T04:13:51.473 回答