d3.js - 새로운 형제 요소를 삽입하는 방법

Question

기존 형제에 새 형제를 삽입하는 데 문제가 있습니다.

나는이 구조를

<svg> 
    <g> 
    <path class="data"></path> 
    <path class="data"></path> 
    </g> 
</svg> 

이이 구조를

<svg> 
    <g> 
    <path class="data"></path> 
    <text></text> 
    <path class="data"></path> 
    <text></text> 
    </g> 
</svg> 

을 원하지만 난 d3.js를 사용하는 경우 선택에도 불구하고 기능 난 다음 얻을

d3.select("g").insert("text", "path.data"); 

을 (삽입 학급별로)

<svg> 
    <g> 
    <text></text> 
    <path class="data"></path> 
    <path class="data"></path> 
    </g> 
</svg> 

어떤 아이디어가 있습니까?

Answer 1

우선 삽입 함수의 두 번째 인수는 셀렉터보다 입니다. 또한 체인화 된 작업이 왼손 결과에 작용합니다.

은 그래서 당신은

// select all the g elements (only 1) 
d3.select("g") 
    // For each g, insert a text element before "path.data" 
    .insert("text", "path.data"); 

는 ".DATA"각 요소를 선택하고 각각에 대해 작업을 수행 할 필요가 있도록, 각 자녀 ".DATA"에 대한 작업을 수행 할

했을 . d3이 특정 자식 다음에 요소를 삽입 할 것을 기대하는 방법에 대해 확신 할 수 없습니다. DOM API를 사용하여 요소 생성 및 삽입 작업을 훨씬 쉽게 수행 할 수 있지만 d3.each 함수를 사용하면 선택 항목을 반복 처리 할 수 ​​있습니다.

d3.selectAll("g > .data").each(function() { 
    var t = document.createElement('text'); 
    this.parentNode.insertBefore(t, this.nextSibling);  
});​