小编zuz*_*zzy的帖子

我正在构建的 d3 强制定向地图有一个烦人的问题，我最初在该地图上使用我需要的节点和链接渲染页面，然后通过 ajax 定期检查新信息。当我需要一个新节点和链接时，我会绘制它们，这很好

然而，由于 SVG 分层元素的方式，新链接在旧节点上绘制，所以我将节点作为圆圈并在它们之间画线，添加的任何新节点都会在旧节点上绘制圆圈的顶部。见下图：

( http://i40.tinypic.com/4fx25j.gif )

我知道这在技术上不是 d3 问题，但必须有办法解决这个问题。我确实尝试删除所有圆圈并重新绘制它们，但问题是它所连接的 svg:g 节点在图层中太低，因此它仍然被绘制。

jsfiddle 上的演示 - 看下面的部分

draw() {
   ...
}

因为那是魔法发生的地方。 http://jsfiddle.net/zuzzy/uwAhy/

我使用 5 秒计时器模拟了 ajax，演示更容易。

有任何想法吗？

我不确定我使用当前的SVG标准可以解决的问题,但我想如果有人知道答案我会问这里

我有一个不断变化的svg路径(通过在d3中形成的节点周围形成一个船体来定义顶点,强制驱动所以节点不断移动,并且边界船体移动以容纳节点)

因为我无法预测顶点,也不知道文本将是什么(因为它取决于那种情况下节点的分组,哪些更改)我所能做的就是盲目地将文本路径上的文本应用到路径中.问题有时文本显示不好.

问题1:颠倒的文本 - 我不介意文本在路径上的位置,但令人讨厌的是它经常以颠倒的方式结束

例如(图片):

[NB问题2分支到SVG文本路径渲染在带有尖角的文本路径上严重破坏单词,如答案中所建议的]

问题2:分解文本 - 当角落形成时,文本有分裂的倾向.起来.我不认为我使用dy将文本推到边界之外有帮助(路径实际上对节点很紧,我应用40个笔划宽度来给出一些填充:dy将文本推到该笔划之外)

例如(图片):

关于我能做些什么来解决这个问题的任何想法？

- 克里斯

svg代码供参考:

问题1:

<g id="hull_elements">
<path class="boundary" id="Secure"     d="M219.31353652066463,309.7274362305448L199.3259715998452,277.60331505353355L54.5215284230899,92.9756148805194L29.418010605669316,64.72387260525474Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>
<path class="boundary" id="DMZ" d="M234.7675515627913,79.25604751762172L122.76947855325542,190.1418483839412L271.90702281166267,76.40758102069142Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>
</g>
<g id="hull_text">
<text dy="30"><textPath startOffset="0" text-anchor="start" method="align" spacing="auto" xlink:href="#Secure">Secure</textPath></text>
<text dy="30"><textPath startOffset="0" text-anchor="start" method="align" spacing="auto" xlink:href="#DMZ">DMZ</textPath></text>
</g>

问题2:

<g id="hull_elements"><path class="boundary" id="Secure" d="M30.716331539726912,88.02778447495649L66.8405337274694,100.01086904278971L251.78816229874747,53.214214251587265L277.8704519199028,25.642491075146587Z" style="fill: #b0c4de; stroke: #b0c4de; stroke-width: 40px; stroke-linejoin: round;"></path>
<path class="boundary" id="DMZ" …