使用 d3js 遍历 SVGElement 路径？

【问题标题】：Iterating through SVGElement paths with d3js?使用 d3js 遍历 SVGElement 路径？
【发布时间】：2012-10-31 18:45:34
【问题描述】：

我正在学习本教程： http://bl.ocks.org/2206529

我想确定每个州的中心区域，但是我有两个问题：

如何迭代每个州的 SVG 元素？
如何确定特定 SVG 元素的中间坐标？

我的 g 元素包含许多路径，其中每个路径代表一个状态。似乎当我使用以下代码时：

states.selectAll("path")

我想使用以下方法找到路径的中心：

    states.selectAll("path").attr("d", function(d) {
        // Get centroid(d)
    });

但是函数参数没有做任何事情。

【问题讨论】：

标签： javascript svg d3.js

【解决方案1】：

这是对 attr 的错误使用。带有第二个参数的 attr 函数用于设置属性，而不仅仅是用于迭代集合。你应该使用 each 函数

https://github.com/mbostock/d3/wiki/Selections#wiki-each

selection.each(函数)

为当前的每个元素调用指定的函数选择，传入当前数据 d 和索引 i，使用 this 当前 DOM 元素的上下文。该运算符在内部使用几乎所有其他运算符，可用于调用任意每个选定元素的代码。 each 运算符可用于通过使用 d3.select(this) 递归地处理选择回调函数。

states.selectAll("path").each(function(d, i) {

        // Get centroid(this.d)
});

【讨论】：