title: contain text into svg shape d3.js
body: <p>I have to write some text into SVG shape created with d3.js
  I need to limit it inside the shape like in this example <a href="http://bl.ocks.org/mbostock/4063582" rel="nofollow noreferrer">http://bl.ocks.org/mbostock/4063582</a></p>
  
  <p>I tried to use a clipPath like in the example. Exploring with firebug the text seems exist but I can't see it. here's my code:</p>
  
  <p>JS:</p>
  
  <pre><code>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
      });
  </code></pre>
  
  <p>and the result in html:</p>
  
  <pre><code> &lt;g transform="translate(631.5288807476019,511.0571103008831)"&gt;
     &lt;circle class="none" fill="blue" stroke="black" stroke-width="2" stroke-dasharray="4px" r="20" cursor="pointer"&gt;
     &lt;clipPath id="clip-DDD"&gt;
      &lt;use href="#DDD"&gt;
     &lt;/clipPath&gt;
     &lt;text clip-path="url(#clip-DDD)" style="sans-serif;text-anchor:middle;fill:black;"&gt;
      &lt;tspan x="3" y="0" font-size="10px"&gt;DDD&lt;/tspan&gt;
     &lt;/text&gt;
  &lt;/g&gt;
  </code></pre>