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

我认为问题在于使用'href'attr需要匹配圆元素的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

正如您所见，文本确实显示在剪辑路径中，而圆圈元素的ID与使用元素的'href'属性相匹配。

包含svg形状d3.js的文本

1 个答案: