D3 : DOM 아래로 데이터 업데이트

Question

데이터 속성을 DOM의 하위 노드에서 업데이트하는 데 문제가 있습니다. SVG를 사용하고 부모 그룹 ('g') 요소에 데이터 배열을 바인딩하고 있습니다. 그런 다음 그룹에는 원과 일부 텍스트가 포함됩니다. 먼저 원을 만들면 부모 'g'의 데이터가 자동으로 전달되어 서클에 바인딩됩니다. 내가 이해할 수없는 것은 부모 'g'요소의 데이터를 업데이트 할 때 자식 '원'노드의 데이터를 업데이트하는 방법입니다.

:

svg -> g (__data__ = 1) -> circle (__data__ = 1) 
     g (__data__ = 2) -> circle (__data__ = 2) 
     g (__data__ = 3) -> circle (__data__ = 3) 
     g (__data__ = 4) -> circle (__data__ = 4) 

가 지금은 새로운 데이터를 매핑 할 : 지금 다음 DOM을

var test = svg.selectAll("g").data([1,2,3,4]); 
test.enter().append("g"); 
test.append("circle"); 

을 : 여기

내가 할 노력하고있어 설명하는 예입니다

var test2 = svg.selectAll("g").data([9,8,7,6]); 

다음 DOM을 제공합니다 :

svg -> g (__data__ = 9) -> circle (__data__ = 1) 
     g (__data__ = 8) -> circle (__data__ = 2) 
     g (__data__ = 7) -> circle (__data__ = 3) 
     g (__data__ = 6) -> circle (__data__ = 4) 

자식 원 노드가 부모 g 요소의 데이터 값을 상속받는 방법을 알아낼 수 없습니다.

test2.selectAll("circle").data(function(d) { return d; }) 

및

test2.selectAll("circle").data(function(d) { return this.parentNode.__data__; }) 

사람이 성취하는 방법을 제안이 있습니까 :

내가 성공하지 않고 다음과 같은 일을 시도했습니다?

Answer 1

연산자는 단일 요소를 선택하는 것 외에도 현재 요소에서 선택한 요소로 데이터를 전파합니다. 각 g 요소는 마치 잘 하나 이상의 circle이있는 경우에는 작동하지 않습니다

test2.select("circle"); 

이를 실행하여 하나의 circle 요소가있는 경우에 당신은 그들 각각을 선택해야하는 것처럼 당신은 당신의 목적을 위해 이것을 사용할 수 있습니다 개별적으로