包含文本SVG形状d3.js

我必须写一些文字到SVG形状d3.js 我需要限制它里面的造型像这个例子中创建http://bl.ocks.org/mbostock/4063582 包含文本SVG形状d3.js

我试图用像clipPath在这个例子中。探索与萤火虫文本似乎存在，但我看不到它。这里是我的代码：

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>

来源

2017-01-17 Manhattan Lo Gnecco

问题修复了，我忘记了形状XD –

上的attr“id”，你也可能想删除'。'在上面出现的两个地方'd.id'之后（它可能会或可能不会引起你的问题，但是当我编码时会出错） – haydenwagner

我认为问题是，使用 'HREF' ATTR需要符合圆的ID元素（在Bostock的例子中，你可以看到他的使用元素的'href'属性匹配他想要填充的矩形ID）

我认为你的代码会工作，如果你添加一个id到圆形元素像t他：

<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元素具有与使用元素的'href'属性相匹配的ID。

来源

2017-01-17 15:46:54 haydenwagner

包含文本SVG形状d3.js

回答

相关问题