javascript - 将文本包含为 svg 形状 d3.js

Question

我必须将一些文本写入使用 d3.js 创建的 SVG 形状中我需要将其限制在形状内，如本例 http://bl.ocks.org/mbostock/4063582 所示

我尝试使用像示例中那样的clipPath。用 Firebug 探索文本似乎存在，但我看不到它。这是我的代码:

JS:

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
    });

以及 html 格式的结果:

 <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

我认为问题在于 use 'href' 属性需要与您的 Circle 元素的 id 匹配(在 Bostock 的示例中，您可以看到他的 use 元素的 'href' 属性与他想要填充的 rect id 匹配)

我认为如果你像这样向圆元素添加一个 id，你的代码就会起作用:

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

这里是一个 codepen 的链接，它可以使用您向我展示的代码尽可能多地对此进行建模:http://codepen.io/haydenwagner/pen/LxbLgd

正如您所看到的，文本确实显示在剪辑路径中，并且 Circle 元素的 ID 与 use 元素的“href”属性相匹配。