D3.js：テキストの下の矩形を描く

Question

d3.jsを使用して放射状折りたたみツリーを作成しています。これはこれまでの様子です： 赤で強調表示されているように、テキストがリンクに重なっていることがあります。テキストを背景色で「強調表示」して、テキストがどこに表示されないようにしたいと思います。

これまでは、CSSの背景色とテキストの.style（）を使用してテキストを強調表示しようとしました。

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

私はまた、マイク・ボストックのbar chartに見られるように、テキストを描画する前に、テキストの大きさの四角形を描くを試してみました。しかし、コードを実行すると、chromeの開発ツール（円には<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

あなたはそれをINGの入力選択、ないselectで四角形をappendする必要があります。

nodeEnter.append("rect") 

を

あなたのフィドルです：https://jsfiddle.net/wLwn9p98/