d3 力定向图，未绘制链接

Question

我是 d3 的新手，没有太多的 Web 前端开发经验。对于我拥有的 Web 应用程序，我正在尝试绘制力导向图。在过去的几个小时里，我一直在努力让它发挥作用。我一直在看很多不同的代码示例，我所做的看起来非常相似。我最终得到了要绘制的节点，但节点之间的链接没有显示出来，我尝试了不同的方法，但似乎没有任何效果。我不知道为什么我的代码不会绘制边缘。

通过将节点和链接打印到控制台，我看到节点有额外的属性，就像 d3 文档提到的那样，但链接似乎从未获得这些属性。下面是我的 javascript 文件和 JSON 文件。我将 JSON 文件减少到只有 3 个条目，以尝试更容易地解决问题。

var height = 1080;
var width = 1920;

var color = d3.scale.category20();

var force = d3.layout.force()
    .linkDistance(-120)
    .linkStrength(30)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


d3.json("/static/javascript/language_data.json", function(data){

force
    .nodes(data.languages)
    .links(data.language_pairs)
    .start();

var link = svg.selectAll(".link")
  .data(data.language_pairs)
  .enter().append("line")
  .attr("class", "link");

var node = svg.selectAll(".node")
  .data(data.languages)
  .enter().append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", function(d) { return color(d.group); })
  .call(force.drag);

node.append("title")
.text(function(d) { return d.language; });

force.on("tick", function() {
  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; });

  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
  });
});

这是 JSON 文件：

通过查看几个示例，我的理解是源和目标是节点列表中的索引位置。

{
   "languages":[
      {"language": "TypeScript", "group": 1},
      {"language": "Java",  "group": 2},
      {"language": "VHDL", "group": 3}
   ],
   "language_pairs":[
      {"source": "0", "target": "1", "value": 5},
      {"source": "1", "target": "2", "value": 5},
      {"source": "2", "target": "0", "value": 5}
   ]
}

对不起，如果我遗漏了什么！感谢您的帮助！

Answer 1

两期：

1.) 您的 "language_pairs" source/target 索引是字符串而不是数字。去掉引号：

"language_pairs":[
  {"source": 0, "target": 1, "value": 5},
  {"source": 1, "target": 2, "value": 5},
  {"source": 2, "target": 0, "value": 5}
]

2.) 您的 linkDistance and linkStrength 参数没有意义：

var force = d3.layout.force()
    .linkDistance(-120) // negative distance? 
    .linkStrength(30) // according to the docs, this must be between 0 and 1?
    .size([width, height]);

Here's an example 解决了这些问题。

d3 力定向图，未绘制链接

d3 force directed graph, links not being drawn

javascript

json

d3.js

graph

force-layout