D3.js强制布局路径标签沿边缘移动不正确

Question

我有一个强制布局图形，可以正确绘制边缘和节点。问题在于边缘的标签。它们被绘制在错误的位置上，并且在图形移动时它们不会沿着边缘移动。你可以看到演示[here]（https://jsfiddle.net/calebgrangel/bgprcdpx/11/）。 有趣的是，动态创建的边缘可以正确显示边缘标签。 我通过浏览器检查了SVG元素，发现了正确的和错误的比较。 edgelabel的transform方法存在问题，但不知道如何解决该问题。

<text class="edgelabel" id="edgelabel3" dx="80" dy="0" font-size="15" fill="#aaa" style="pointer-events: none;" transform="rotate(180 615.890625 381.9453125)"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#edgepath3" style="pointer-events: none;">50</textPath> 
</text> 

和错误的一个是

<text class="edgelabel" id="edgelabel2" dx="80" dy="0" font-size="15" fill="#aaa" style="pointer-events: none;"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#edgepath2" style="pointer-events: none;">30</textPath></text> 

Answer 1

的问题是不的的edgelabels在tick()函数的变换方法。其实，你甚至不需要它，因为它们是文本路径！

这里的问题是不同的。当你这样做：

graph.addNode('Node 1'); 
graph.addNode('Node 2'); 
graph.addNode('Node 3'); 
graph.addNode('Node 4'); 

graph.addLink('Node 1', 'Node 2', '10'); 
graph.addLink('Node 1', 'Node 3', '20'); 
graph.addLink('Node 2', 'Node 4', '30'); 

你是，对于每一个这些电话，称update()，并用图表这会搞乱。

解：从两个addNode()和addLink()功能除去update()。然后，把它加入链路和节点后：

graph = new myGraph("#svgdiv"); 

graph.addNode('Node 1'); 
graph.addNode('Node 2'); 
graph.addNode('Node 3'); 
graph.addNode('Node 4'); 

graph.addLink('Node 1', 'Node 2', '10'); 
graph.addLink('Node 1', 'Node 3', '20'); 
graph.addLink('Node 2', 'Node 4', '30'); 

graph.update();//calling update here 

这里是你更新的提琴：https://jsfiddle.net/dLo3v75c/