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

Question

我有一个力布局图，可以正确绘制边和节点。问题在于边缘的标签。它们被绘制在错误的位置，并且在移动图形时它们不会沿着边缘移动。你可以看到演示[这里]（https://jsfiddle.net/calebgrangel/bgprcdpx/11/）。 有趣的是，动态创建的边缘正确显示边缘标签。 我通过浏览器检查了SVG元素，并找到了正确的和错误的之间的比较。 var node = document.getElementById('my-node'); domtoimage.toPng(node) .then (function (dataUrl) { var img = new Image(); img.src = dataUrl; document.appendChild(img); }) .catch(function (error) { console.error('oops, something went wrong!', error); }); 的{​​{1}}方法存在问题，但不知道如何修复它。

transform

错误的是

edgelabel

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()，这会弄乱你的图表。

解决方案：从update()和addNode()功能中删除addLink()。然后，在添加链接和节点之后将其命名为：

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/