SVG形状にテキストが含まれているが、私はd3.js で作成したSVG形状にテキストを記述する必要が

Question

をd3.js私はクリップ経路などを使用しようとしたこの例ではhttp://bl.ocks.org/mbostock/4063582

のような形状の内側にそれを制限する必要がありますこの例では、火かき棒で探検すると、テキストが存在するように見えますが、私はそれを見ることができません。ここに私のコードは次のとおりです。

JS：HTMLで

d3.select(".nodes").selectAll("g").append("clipPath") 
    .attr("id", function(d) { return "clip-" + d.id; }) 
    .append("use") 
    .attr("xlink:href", function(d) { return "#" + d.id.; }); 


d3.select(".nodes").selectAll("g") 
    .append("text") 
    .attr("clip-path", function(d) { return "url(#clip-" + d.id; }) 
    .attr("style","sans-serif;text-anchor:middle;fill:black;") 
    .append("tspan") 
    .attr("x", 3) 
    .attr("y", 0) 
    .attr("font-size","10px") 
    .text(function(d) { 
     return d.id 
    }); 

と結果：

<g transform="translate(631.5288807476019,511.0571103008831)"> 
    <circle class="none" fill="blue" stroke="black" stroke-width="2" stroke-dasharray="4px" r="20" cursor="pointer"> 
    <clipPath id="clip-DDD"> 
    <use href="#DDD"> 
    </clipPath> 
    <text clip-path="url(#clip-DDD)" style="sans-serif;text-anchor:middle;fill:black;"> 
    <tspan x="3" y="0" font-size="10px">DDD</tspan> 
    </text> 
</g> 

Answer 1

私は問題は使用 'HREF' attrはあなたのサークルのIDと一致する必要があることだと思いますあなたが使用したい要素の 'href'属性が、入力したいrect idと一致することがわかります）

idのような円要素にtを追加すると彼：http://codepen.io/haydenwagner/pen/LxbLgd

テキストがクリップパスに表示さん見ることができるように：ここでは

<circle id="DDD" class="none" fill="blue" stroke="black" stroke-width="2" stroke-dasharray="4px" r="20" cursor="pointer"> 

は、私はコードで、あなたが私を示したことができ、これは同じくらいというcodepenモデルへのリンクですcircle要素は、使用要素 'href'属性に一致するIDを持ちます。