SVG 창에 제목을 추가하면 하나의 데이터 포인트가 지워 집니까? (D3)

Question

나는 100 개 숫자의 집합을 가지고, 그리고 SVG에서 나는 아래의 코드를 사용하여 그 수를 표시하는 텍스트 개체의 무리 만들 :이 완벽하게 작동

  svg.selectAll("text") 
      .data(dataset) 
      .enter() 
      .append("text") 
      .text(function(d) { 
       console.log(output_format(d)); 
       return output_format(d); 

합니다. 그러나, 나는이 코드 (내 d3.csv 브래킷의 외부) 나중에 제목을 만들려고하면 : ((첫 번째 데이터 포인트가 삭제됩니다, 심지어 CONSOLE.LOG에 표시되지 않는 그런

 svg.append("text") 
      .text("Actual Labels") 
      .attr("x", w/1.92) 
      .attr("y", top_gap/1.5) 
      .attr("class", "title"); 

OUTPUT_FORMAT을 디));. 여기서 무슨 일이 일어나고 어떻게 해결할 수 있습니까?

Answer 1

다른 코드가 AJAX 요청을 기다려야하기 때문에 단일 텍스트 요소가 먼저 추가됩니다. 따라서 텍스트 요소의 나머지 부분을 추가 할 때 이미 이미 있습니다. 이 기존 텍스트 요소는 selectAll("text")으로 선택한 다음 dataset의 데이터와 일치시킵니다. 기본적으로 d3은 인덱스를 기반으로하는 데이터와 일치합니다. 배열의 첫 번째 요소는 이미있는 첫 번째 요소와 일치하므로 사용자가 조작하는 .enter() 선택 항목에 없습니다.

가장 쉬운 방법은 추가하는 텍스트 레이블에 동적으로 다른 클래스를 지정하고이를 기반으로 선택하는 것입니다. 즉, 동적 레이블을 추가하는 코드는 다음과 같습니다.

svg.selectAll("text.label") 
     .data(dataset) 
     .enter() 
     .append("text") 
     .attr("class", "label") 
     .text(function(d) { 
      console.log(output_format(d)); 
      return output_format(d); 
     }); 

기타 변경 사항은 필요하지 않습니다.