理解D3.js如何将数据绑定到节点上

5 浏览
0 Comments

理解D3.js如何将数据绑定到节点上

我正在阅读D3.js的文档，发现很难理解文档中的selection.data方法。下面是文档中给出的示例代码：

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];
var tr = d3.select("body").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; });

我理解其中大部分内容，但是.data(function(d) { return d; })这部分在var td语句中是什么意思？

我最好的猜测如下：

  • var tr语句将一个四元素数组绑定到每个tr节点上
  • 然后var td语句使用这个四元素数组作为数据，以某种方式

但是.data(function(d) { return d; })实际上是如何获取这些数据的呢？它返回什么？

0