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/