为何在d3.selection.each调用中d3.select(this)无法返回预期节点？

你忽略了箭头函数的this绑定规则。

D3的selection.each()方法在调用普通函数回调时，会将this绑定到当前遍历的DOM节点（也就是你说的div元素），但如果用箭头函数作为回调，箭头函数不会创建自己的this上下文，它的this是继承自外层词法作用域的，根本不是D3传递的目标div节点，所以d3.select(this)自然选不到对应的元素。

解决方法有两种：

• 改用普通函数作为each的回调，此时this会被D3正确绑定到当前div：

divs.each(function(d, i, nodes) {
  d3.select(this).selectAll('span')
    .data([1,2,3])
    .join('span')
        .text(i => `${d}.${i}`);
})

• 继续使用箭头函数，保持用nodes[i]获取当前DOM节点（也就是你现有代码中可行的方式）。

内容的提问来源于stack exchange，提问作者rndblnch