d3js를 사용하여 SVGElement 경로를 반복할까요?

Question

나는이 자습서 다음입니다 : 나는 모든 국가의 중앙 영역을 결정하려는 http://bl.ocks.org/2206529

을,하지만 난이 문제가 : 나는 모든 국가의 SVG 요소를 반복하려면 어떻게

1. 를?
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) 
});