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");

然后在tick（）中：

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

您在x1, x2, y1, y2元素而不是svg:g上添加了属性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) ... */
}

强制导向的d3.js添加边标签

1 个答案: