如何正确迭代节点

Question

我正在尝试在D3中遍历我的节点，但是我正在努力，因为如果我使用内置函数，datum参数似乎总是undefined。我尝试过的一个片段的例子：

d3.selectAll(nodes.enter())
  .each(function(d) { 
   console.log(d);
});

我也尝试删除enter()以在所有节点上运行，但我遇到了同样的问题。但是，如果我更改我的代码，则使用DOM元素的典型创建方法：

nodes.enter().append("div")
             .attr("class", function(d) { 
                 console.log(d);
});

然后它工作正常并显示以下输出：

我想我必须以某种方式将其称为错误，但我找不到一个体面的例子，如果我做错了，那么文档还不够清楚我发现错误。这是each()函数文档的快速链接。

Answer 1

{D3}选项定义.each()功能，因此无需再次选择现有选择。但是，.each()上未定义.enter()。

var sel = d3.selectAll("div").data([1,2,3]);

sel // .each() is defined, but the selection is empty
sel.enter() // .each() is not defined on .enter()

sel.enter().append("div").html(function(d) { return d; });

sel.each(function(d) { // now .each() is defined and the selection
                       // contains the new elements
  console.log(d);
});

如果你想迭代数据，你可以用以下hacky方式进行输入选择，潜入D3的内部数据结构：

sel.enter()[0].forEach(function(d) {
  console.log(d.__data__);
});