D3JS 선택 및 등급

Question

div.someclass가 존재하지 않는 경우 자동으로 생성되도록 다음 코드를 확장하는 간단한 방법이 있습니까?

d3.select("body").select("div.someclass").selectAll("p") 
    .data([ 1, 2, 3 ]) 
    .enter() 
     .append("p") 
     .text(function (d, i) { 
      return "index: " + i + ", value: " + d; 
     }); 

저는 아직 D3JS를 배우는 초기 단계에 있습니다. 지금까지의 나의 이해는 "D3에게 무언가를하는 방법을 말하는 대신에, D3에게 당신이 원하는 것을 말하라"는 것입니다. 그래서 위의 코드는 <div class="someclass"></div>이 HTML로 선언되어야한다는 것을 알게되어 놀랐습니다.

/** Append HTML placeholder programmatically **/ 
placeholder = d3.select("body").append("div").attr("class", "someclass"); 

/** Bind the data to the DOM **/ 
/** instead of telling D3 how to do something, tell D3 what you want: in the absence of <p>, this will return a virtual selection **/ 
placeholder.selectAll("p") 
    .data([ 1, 2, 3 ]) 
    .enter() 
     .append("p") 
     .text(function (d, i) { 
      return "index: " + i + ", value: " + d; 
     }); 

짧은/더 나은 방법이 있나요 :

대안은 프로그래밍 사업부를 삽입하는 것입니다?

Answer 1

정확하게 이해하면 div.someClass IFF를 추가하는 방법을 묻습니다. 존재하지 않습니다. 이 이상한 조금 비록 이것에 대한 D3 패턴은있다 :

이

// create a selection for the container with a static 1-element array 
var container = d3.select("body").selectAll("div.someclass") 
    .data([0]); 

// now add it if it doesn't exist 
container.enter().append('div').attr('class', 'someclass'); 

// now use it for the subselection 
container.selectAll("p") 
    .data([1, 2, 3]); 

// etc 

이상한 부분은 여기 .data([0])합니다 - 0가 기존 요구되지는; 이것은 임의의 정적 단일 요소 배열 일 수 있습니다. 이것이 처음 호출 될 때 새로운 요소가 생성됩니다 (다른 요소가 div.someclass을 먼저 생성하지 않는 한). 두 번째로, 요소가 이미 있으므로, .enter() 선택 사항이 없으므로 더 이상 추가되지 않습니다.

이것은 반복적으로 업데이트 할 때 호출하는 재사용 가능한 구성 요소의 일반적인 패턴입니다 (예 : d3.svg.axis code 참조).

Answer 2

당신이하고있는 방식이 올바른 방법입니다. 일반적으로 프로그래밍 방식으로 만드는 노드에 프로그래밍 방식으로 클래스를 추가합니다. 그건 당신이 하나를 원한다면 거기에 클래스를 추가 할 수있는 시간이 될 것입니다, 그래서 예를 들어, 새로운 <p> 요소를 만드는 : 당신이 D3를 사용하여 수명주기를 관리하지 않을있는 요소

placeholder.selectAll("p") 
    .data([ 1, 2, 3 ]) 
    .enter() 
    .append("p") 
     .attr("class", "myclass") <-- add class here 
     .text(function (d, i) { 
      return "index: " + i + ", value: " + d; 
     }); 

을, 당신은 필요 또한 다른 방식으로 이러한 요소의 속성을 관리합니다. 이것은 초기 HTML에서 하드 코딩 될 수 있거나 사용자가 가진 것처럼 정확하게 처리 할 수 ​​있습니다.

또는 selection.classed이라는 API가 있습니다.이 API는 클래스가 없거나없는 경우에만 클래스를 추가하거나 제거합니다. 요소에 잠재적으로 많은 클래스가 있고 전체 속성을 손상시킬 수있는 단일 요소를 목록에서 전환하려는 경우 (selection.attr("class", "myclass"과 반대로)이 방법이 유용 할 수 있습니다.