javascript - 使用 d3js 遍历 SVGElement 路径？

Question

我正在关注本教程： http ://bl.ocks.org/2206529

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

1. 如何遍历每个州的 SVG 元素？
2. 如何确定该特定 SVG 元素的中间坐标？

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

states.selectAll("path")

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

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

但是函数参数不做任何事情。

Answer 1

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

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

selection.each(函数)

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

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

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