強制執行的d3.js添加邊緣標籤

Question

我想用強制定向的佈局來可視化d3js中的圖形。我一直在關注這個question，但我沒有得到它的工作。

我創建了一個jsfiddle，它可以找到here. 但是，現在行不起作用，但標籤是他們應該如何。奇怪的是，當我執行它在本地這是工作但總有一天線顯示兩次，這樣的：

<g class="link-g"> 
     <line class="link" x1="297.0210832552382" y1="122.48446414068198" x2="245.8066880510027" y2="240.1061616356794"></line> 
     <text>interaction</text> 
     <text x="271.4138856531205" y="181.2953128881807">interaction</text> 
</g> 

不管怎樣，我做的是以下幾點。首先是鏈接和鏈接文字。

var link = svg.selectAll(".link") 
    .data(links, function(d) { 
      return d.source.id + '-' + d.target.id; 
    }); 

link.enter() 
     .append("g") 
     .attr("class","link-g") 
     .append("line") 
     .attr("class", "link"); 

link.exit().remove(); 

var linktext = svg.selectAll(".link-g") 
     .append("text") 
     .text("label"); 

然後在蜱（）：

link.attr("x1", function(d) { 
      return d.source.x; 
    }) 
    .attr("y1", function(d) { 
     return d.source.y; 
    }) 
    .attr("x2", function(d) { 
      return d.target.x; 
    }) 
    .attr("y2", function(d) { 
     return d.target.y; 
    }); 

我在做什麼錯？謝謝。

Answer 1

您在svg:g元素上添加屬性x1, x2, y1, y2而不是line，這就是爲什麼沒有可見鏈接的原因。

如果您檢查代碼：svg:g元素具有良好的值，並且line沒有任何屬性。

創建一個新的變量來存儲你的鏈接，並在此變量添加屬性：

var linkLine = link.enter() 
    .append("g") 
    .attr("class","link-g") 
    .append("line") 
    .attr("class", "link"); 

和更新剔功能

function tick(){ 
    linkLine.attr("x1", function(d) { 
     return d.source.x; 
    }) 
    /* ... (others attr) ... */ 
}