d3 목록 가운데에서 열거합니까?

Question

제가 작업하고있는 d3 차트에 다소 신비한 문제가 있습니다.

다음은 내가 작업중인 두 가지 데이터 기반 차트의 코드입니다.

svg.selectAll("rect") 
      .data(nyb.features) 
      .enter() 
      .append("rect") 
      .attr({ 
       "fill": "steelblue", 
       "width": bar_width, 
       "height": function(d) { return 250 - y(d.properties.distance) - 5; }, 
       "x": function(d, i) { return ((bar_width + 1) * i) + 55; }, 
       "y": function(d) { return y(d.properties.distance); } 
      }); 

    svg.selectAll("text") 
      .data(nyb.features) 
      .enter() 
      .append("text") 
      .attr({ 
       "fill": "red", 
       "x": function(d, i) { console.log(i); return ((bar_width + 1) * i) + 55; }, 
       "y": function(d) { return y(d.properties.distance); } 
      }) 
      .text("Hello World!"); 

내가이 술집의 집합 그 술집에 대한 텍스트 레이블 세트를 생성 할 것으로 예상 : 두 번째 레이블을 채 웁니다 동안 첫 번째는 막대 차트에서 막대를 채 웁니다.

:

콘솔을 확인, 이것은 단지 중간에 데이터를 열거하기 시작 D3에 의한 것으로 보인다 : 어떤 이유

이 대신 내 출력

왜 그럴까요?

Answer 1

난 그냥 어제 비슷한 질문에 대답하지만, 후세에 한 번 더부터 는

이 svg.selectAll("text") 및 svg.selectAll("rect"), 당신은 나에게 모든 text을주는 말을 사용하지 마십시오 ... 중복으로이를 닫습니다 유혹 이 svg에서 실수로 원하지 않는 요소를 선택하고 있습니다. 그러므로 당신은 더 작은 입력 선택을 가지고 있습니다. 어떤 것들은 이미 존재합니다. 그것을 할 수

더 나은 방법은 다음과 같습니다

는

svg.selectAll(".myUniqueClass") 
    .data(nyb.features) 
    .enter() 
    .append("text") 
    .attr("class", "myUniqueClass") 
    ...