如何使用参数 ind d3.selectAll('line').each

Question

我需要创建一个数组，其中包含我的 SVG 中所有行的所有端点。
为此，我想用 d3-each 遍历所有行。
现在为了理解，这个函数的参数包含什么？

d3.select('svgEditor').selectAll('line').each(function(d,i){});

我知道那i是索引，但d在这种情况下，始终为空。
里面不应该有某种迭代元素或数据吗？
并且是迭代正确的方式还是更简单、更快的可能，也许有一些像地图这样的功能？

Answer 1

访问您的行的正确方法是函数内的 d3.select(this) 。d 参数是连接的数据。我不知道是否有更好的迭代方法，但 .each 函数对我有用。以下是https://www.d3indepth.com/selections/中 .each 的示例用法：    function addNumberedCircle(d, i) {    d3.select(this)        .append('circle')        .attr('r', 40);      d3.select(this)        .append('text')        .text(i + 1)        .attr('y', 50)        .attr('x', 30);    }    d3.selectAll('g.item')      .each(addNumberedCircle);

Answer 2

文档说 .each 函数的三个参数是 (1) 数据，(2) 当前索引，以及 (3) 选择中的节点。https://github.com/d3/d3-selection/blob/v1.4.1/README.md#selection_each在这里提供一个答案，以防万一有人想使用 ES6 箭头函数，或者他们在使用已接受答案中使用的“this”关键字时遇到问题。在每个函数中选择元素时使用“this”很好，但我在 SPA 应用程序中使用“this”时遇到了问题，其中“this”通常意味着其他含义，可能会让人感到困惑。为避免使用“this”，可以将代码更改为：d3.select('svgEditor').selectAll('line').each(function(d,i){  d3.select(this).append.....});到：d3.select('svgEditor').selectAll('line').each((data, i, nodes) => {  d3.select(nodes[i]).append....});这篇文章有助于解释https://medium.com/@yonester/on-d3-and-arrow-functions-b6559c1cebb8