Question

我在这里遵循嵌套选择教程：http://bost.ocks.org/mike/nest/。

我已复制了代码，但无法将值绑定到td。正在创建表结构，但未将值输入td元素。如果我在d追加函数上记录td，它将打印来自matrix的数组。即使我放入return 1，也不会填充td。

<!DOCTYPE html>
<style>

</style>

<body>


</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var matrix = [
  [ 0,  1,  2,  3],
  [ 4,  5,  6,  7],
  [ 8,  9, 10, 11],
  [12, 13, 14, 15],
];

var body = d3.select("body");

var table = body.append("table");

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

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

</script>

控制台输出：

Array [ 0, 1, 2, 3 ] nested_selections.html:30:6
Array [ 4, 5, 6, 7 ] nested_selections.html:30:6
Array [ 8, 9, 10, 11 ] nested_selections.html:30:6
Array [ 12, 13, 14, 15 ] nested_selections.html:30:6

如果我尝试抓住这样的索引：

var td = tr.selectAll("td")
    .data(function(d, i) { 
        console.log(d[i]);
        return d; 
    })
  .enter().append("td");

我得到这个控制台输出（看起来它结合了数组索引和嵌套数组）：

0 nested_selections.html:30:6
5 nested_selections.html:30:6
10 nested_selections.html:30:6
15 nested_selections.html:30:6

感谢您的帮助。

Answer 1

看起来<td>的内容从未设置过。您需要添加append('td').text(_.identity) *之类的内容，只需将其内容设置为d即可。见this fiddle

或.html()可用于超文本内容。

*：_为underscore或lodash

d3嵌套选择教程不渲染表

1 个答案: