强制执行的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) ... */ 
}