使用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元素的这个上下文关联。几乎所有其他操作符都可以在内部使用此运算符，并且可以用于为每个选定元素调用任意 代码。通过在 回调函数中使用d3.select（this），可以递归地使用每个运算符 进程选择。

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

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