使用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)
});