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。）你的＆＃34; language_pairs＆＃34;源/目标索引是字符串而不是数字。摆脱引号：

"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解决了这些问题。

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

1 个答案: