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

我有一个力布局图，可以正确绘制边和节点。问题在于边的标签。它们绘制在错误的位置，并且在图形移动时不会沿边移动。你可以看到演示[在这里]（）。 有趣的是，动态创建的边正确地显示了边标签。 我通过浏览器检查了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>

50

而错误的是

<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>

30

问题在于不是

tick（）

函数中

edgelabel

的变换方法。实际上，您甚至不需要它，因为它们是文本路径

这里的问题不同。执行此操作时：

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

---

这是您更新的小提琴：

在更新的小提琴中，当我单击添加新节点和边缘按钮时，节点5不会被添加。另外，当我点击重启图形按钮时，我有一个

错误：属性d：预期数字，“M undefined unde…”。attrFunction@d3.v3.js:670

这是另一个问题。我刚刚向您展示了问题标题中所述问题的确切原因，甚至还展示了正确解决该特定问题的解决方案。我没有重构您的代码以适应修复，这远远超出了问题的范围。