如何使用参数 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