내 d3 막대 그래프에 아무 것도 추가 할 수 없습니다.

Question

Here은 내 막대 그래프의 단순화 된 대중 용 눈 버전입니다. 나는 그것에 아무 것도 추가 할 수없는 것 같습니다. 나는 this 자습서를 따라 x 축의 세로선과 각 막대 안의 텍스트를 그래프에 추가하려고 시도했지만 둘 다 나타나지 않았습니다. 기본적으로 추가하려고하는 것은 실제로 아무것도 나타나지 않지만 graph.js @ line 65에서 볼 수있는 x 축 선을 추가 할 수있었습니다. 그래프에서 행의 코드를 라인에 추가하려고 시도한 것을 볼 수 있습니다 56. graph.js. x 값은 임의적으로 나타납니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

문제는 선택기 인 "선"이 충분히 구체적이지 않다는 것입니다. 문서에 이미 '줄'요소가 있습니다. 그들은 축 틱을 형성합니다.

그 때문에 코드에서 다음을 수행합니다. 기존 라인 요소를 선택하고 제공된 요소를 해당 요소에 바인딩합니다. 이러한 요소가 이미 있기 때문에 enter() 선택 항목은 비어 있습니다. 즉, 추가 ("줄") 명령은 절대로 실행되지 않습니다.

 var lines = svg.selectAll("line") 
      .data(data) 
      .enter().append("line") 

클래스를 추가하면 더 많은 특수성을 제공 할 수 있습니다. 예를 들어 다음과 같은 작업을해야합니다 :

엔터, 업데이트 및 종료 선택이 마이크의 기사 Thinking with Joins에서 찾을 수 있습니다에 대한

var lines = svg.selectAll("line.rules") 
    .data(data) 
    .enter().append("line") 
    .attr("class", "rules"); 

더.