爲什麼我的D3力佈局圖線延伸到圓圈？

Question

這裏沒有做任何奇怪的事情。但我似乎無法讓他們與圈子的外緣相匹配。任何幫助，將不勝感激。

 // Create Nodes 
    var node = svg.selectAll(".node") 
     .data(force.nodes()) 
     .enter().append("g") 
     //.group(d.group) 
     .attr("class", "node") 
     .on("mouseover", nodeMouseover) 
     .on("mouseout", nodeMouseout) 
     .call(force.drag); 

    // Append circles to Nodes 
    var circle = node.append("circle") 
     .attr("r", 8) 
     .style("stroke", function (d) { return d.BaseColor; }) 
     .attr("id", function (d) { return d.ID; }) 
     var link = svg.selectAll(".link") 
     .data(force.links()) 
     .append("line") 
     .attr("class", "link arrow") 

    // Draw lines for Links between Nodes 
    var link = svg.selectAll(".link") 
     .data(force.links()) 
     .append("line") 
     .attr("class", "link arrow") 

Answer 1

在SVG創建的最新對象去前面，這就是爲什麼你平時創建節點之前的鏈接。鏈接默認連接到節點的中心。你可以看到這個例子，如果你改變一個節點的不透明度，使它稍微透明。

// Draw lines for Links between Nodes 
var link = svg.selectAll(".link") 
    .data(force.links()) 
    .append("line") 
    .attr("class", "link arrow") 

// Create Nodes 
var node = svg.selectAll(".node") 
    .data(force.nodes()) 
    .enter().append("g") 
    //.group(d.group) 
    .attr("class", "node") 
    .on("mouseover", nodeMouseover) 
    .on("mouseout", nodeMouseout) 
    .call(force.drag); 

// Append circles to Nodes 
var circle = node.append("circle") 
    .attr("r", 8) 
    .style("stroke", function (d) { return d.BaseColor; }) 
    .attr("id", function (d) { return d.ID; })