使用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(功能)

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

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

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