D3.js : 텍스트 아래에 직사각형 그리기

Question

d3.js를 사용하여 방사형 접을 수있는 트리에서 작업 중입니다. 지금까지의 모습입니다 : 빨간 색으로 강조 표시된 부분은 링크가 텍스트와 겹치는 부분입니다. 텍스트를 배경색으로 "강조 표시"하여 텍스트가있는 곳에 링크가 나타나지 않게하고 싶습니다.

지금까지 CSS에서 배경색과 텍스트의 .style()을 사용하여 텍스트를 강조 표시했습니다. 마이크 Bostock의 bar chart에서 볼 수 있듯이

.node text { 
background-color: yellow; 
    font: 12px sans-serif; 
    } 

는 또한, 텍스트를 그리기 전에 텍스트의 크기의 직사각형 그리기 을 시도했습니다. 그러나 코드를 실행할 때 크롬 개발자 도구 (원에 대해서는 <circle> 태그가 있지만 사각형 태그는 없음)를 통해 소스 코드 에서조차 사각형을 찾을 수 없습니다.

여기 코드의 일부인 JSFiddle입니다. CSS를 작동 시키려면 노란색으로 사각형을 만들었지 만 제대로 작동하지는 못합니다.

사각형의 코드는 다음과 같습니다

.node rect { 
    fill: yellow; 
} 

nodeEnter.select("rect") 
     .attr("height", 15) 
     .attr("width", 200) 
     .attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50) + ")"; }) 
     //.style("fill","yellow") 
; 

및

nodeUpdate.select("rect") 
     .attr("height", 15) 
     .attr("width", 200) 
     .attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50) + ")"; }) 
     //.style("fill","yellow") 
; 

Answer 1

을 당신은 append에있는 입력 선택의 사각형은 그것을 보내고하지 select :

nodeEnter.append("rect") 

여기에 귀하의 바이올린 : https://jsfiddle.net/wLwn9p98/