我在这里遵循嵌套选择教程:http://bost.ocks.org/mike/nest/ .
我已复制代码，但无法将值绑定(bind)到 td。正在创建表结构，但值未输入到 td 元素中。如果我在 td 附加函数上记录 d，它会打印 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
感谢您的帮助。
最佳答案
看起来像<td>的内容s 从未被设置。您需要添加类似 append('td').text(_.identity) 的内容*，只需将其内容设置为 d 。请参阅this fiddle
或者.html()可用于超文本内容。
*:_是 underscore或lodash
关于javascript - d3嵌套选择教程不渲染表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29969538/