d3强制有向图，未绘制链接

Question

我是 d3 新手，没有太多 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”源/目标索引是字符串而不是数字。去掉引号：

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

2.) 您的 linkDistance 和 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 解决了这些问题。