1

有人可以验证我创建的 svg 元素并解释为什么不显示文本吗？

作为背景故事，我正在编写一个脚本以更好地理解 d3.js，最新的问题是创建一个围绕节点组的外壳，并在形成外壳的路径上插入一个标签以识别它。

代码生成节点和周围的船体 - 船体是一个 SVG 路径，所以我应该能够添加一个文本元素和一个映射到路径的文本路径。

做一些黑客攻击，我有时可以让文本出现，但“正确”地写它什么都没有显示。生成的 svg 代码是：

<g id="hull_elements">
<text>
    <textPath stroke="black" xlink:href="#Secure">Secure</textPath>
</text>
<text>
    <textPath stroke="black" xlink:href="#DMZ">DMZ</textPath>
</text>
<path class="boundary" id="Secure" d="M24.994993112707032,141.1110721988244L207.12813092409354,138.58243426955073L238.50323679510393,118.21543431124748L24.97785884420025,103.5985025585574Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>

<path class="boundary" id="DMZ" d="M88.15998924466983,242.42648560274165L208.29914853798698,349.28995851784157L189.37253440909416,316.73364831006586L117.42121587510853,219.36649184836727Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>
</g>

我相信这是有效的 - 我可以轻松地将文本元素移动到路径上方或下方，但文本仍然没有出现。

小提琴位于http://jsfiddle.net/zuzzy/hWd7K/1/并且文本路径部分在第 382 行附近

谁能建议这有什么问题？奇怪的时候我实际上得到了一些工作（例如，请参阅第 370 行附近的 jsfiddle http://jsfiddle.net/zuzzy/cxnT8/就 d3 而言，它的实现错误，但它实际上显示了文本）

谢谢！

4

1 回答 1

0

您已经在文本顶部绘制了路径，因此它覆盖了它。如果你想看文字

a）将其绘制在路径的顶部

function tick() {
  hullvis.selectAll("path")
        .data(groups)
        .attr("d", groupPath)
        .enter().insert("path", "realnode")
        .style("fill", "lightsteelblue")
        .style("stroke", "lightsteelblue")
        .style("stroke-width", 40)
        .style("stroke-linejoin", "round")
        .attr("class", "boundary")
        .attr("id", function (d) {return d.key;});

    //redraw the hull
    hullvis.selectAll("text")
        .data(groups)
        .enter().append("text").append("textPath")
        .attr("stroke","black")
        .attr("xlink:href", function (d) {return "#" + d.key;})
        .text(function (d) { return d.key;} );

或者

b) 通过将路径设置为<defs>标签或可见性的子级来隐藏路径：如有必要，隐藏。

于 2013-06-02T13:21:58.427 回答