D3.js HTML 목록과 하위 목록에 중첩 된 데이터 조인

Question

이 Fiddle http://jsfiddle.net/kaxjL3La/은 D3 general update pattern을 중첩 된 <ul><li> HTML 목록을 사용하기위한 나의 시도를 보여줍니다. 이 상황을 복잡하게 만드는 것은 내가 tr/td 또는 g/circle 인 웹상의 예제와 달리 바깥 쪽 목록과 내부 목록에 동일한 태그를 사용하려고한다는 것입니다. 즉 바이올린 설명하기

: I는 번호 목록을 원하는 각 수 어떤 유도 값 하위 목록 갖는, 정렬되지 않은리스트에 배치 할 :

function update(arr) { 
    var globalList = d3.select("#lst"); 

    var data = globalList.selectAll("li").data(arr, function(d) { return d; }); 
    data.exit().remove(); 
    var list = data.enter().append('li').text(
     function(d, i) { return "[" + i + "]=" + d; }); 
    var subList = list.selectAll("ul") 
         .data(function(d) { return [ d/10, d/100 ]; }) 
         .enter() 
         .append("ul") 
         .append("li") 
         .text(function(d, i) { return "[" + i + "]=" + d; }); 
} 

제 업데이트 (생성 단계) 잘 작동하지만 update에 대한 후속 호출은 업데이트 요소 (update(), 즉 30까지의 호출간에 동일한 번호)에 대해 하위 목록이 사라지는 결과를 초래합니다. remove() 호출 전에 console.log(data.exit())을 추가하면 selectAll("li").data(...) 호출이 하위 목록과 일치하여 제거됩니다.

하위 목록에 <li> 태그를 사용하지 않고 과 같이 <ul> 태그의 시퀀스가있는 경우 업데이트시 하위 목록을 잃지 않습니다. 내 데이터 조인 및 데이터 기반 디스플레이에 관한 한 올바른 동작이지만 내 목록 요소가 포함 된 <ul> 태그 시퀀스가있는 것은 좋지 않습니다! 서브리스트가 selectAll()에 잡히지 않은 태그들로 구성되어 있다면, 나는 올바른 행동을한다는 ​​것을 확인하기 위해서만 이것을 보였다.

내 질문은 : 어떻게 방지 할 D3의 selectAll 재귀 내가 하위 목록에 <ul><li> 태그를 사용할 수 있도록 globalList 선택기의 모든 <li> 후손을 찾는에서?

Answer 1

https://stackoverflow.com/a/14438376/500207을 읽은 후, 나는 다음 outer 같은 외부 목록의 <li> 태그를 사용자 정의 CSS 클래스를 할당 selectAll("li.outer")를 호출하여이 작업을 수행 할 수 있습니다.

function update(arr) { 
    var globalList = d3.select("#lst"); 

            // v----v note 1 (of 2) 
    var data = globalList.selectAll("li.outer").data(arr, function(d) { return d; }); 
    data.exit().remove(); 
    var list = data.enter().append('li').text(
     function(d, i) { return "[" + i + "]=" + d; }) 
          .classed('outer', true); // <--- note 2 (of 2) 
    var subList = list.selectAll("ul") 
         .data(function(d) { return [ d/10, d/100 ]; }) 
         .enter() 
         .append("ul") 
         .append("li") 
         .text(function(d, i) { return "[" + i + "]=" + d; }); 

이 작업이 가장 좋은 방법입니까?