D3.js node.each()函数

在使用 D3.js 渲染 SVG 图表时，经常需要对图形元素进行操作。node.each() 函数是 D3.js 中一个非常有用的方法，用来对选择的数据节点进行遍历，让我们可以针对每个节点进行操作。

语法

selection.each(function(d, i, nodes));

参数说明

• function(d, i, nodes)：回调函数，定义对每个节点的操作。其中，d 表示节点绑定的数据，i 表示节点在数据数组中的索引，nodes 表示节点数组。

示例

d3.select("body")
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
  .style("width", function(d) { return d * 10 + "px"; })
  .text(function(d) { return d; })
  .each(function(d, i, nodes) {
    console.log("节点 " + i + " 的数据是 " + d);
  });

上面的代码中，我们使用 selectAll() 方法选择页面中所有的 div 元素，并将一个长度为 6 的数组绑定到这些元素上。在添加完 div 元素后，我们使用 each() 方法遍历所有节点，输出它们的数据和索引。

返回值

node.each() 方法返回当前选择集，方便使用链式语法。

总结

node.each() 函数是 D3.js 中一个常用的方法，用来对选择的数据节点进行遍历并执行操作。在实际开发中，该函数可以很好地满足我们对图表元素的定制需求。