在 d3.js v4 中读取收敛力有向图的外部坐标答案

【问题标题】：read external coordinates of a converged force directed graph in d3.js v4在 d3.js v4 中读取收敛力有向图的外部坐标
【发布时间】：2017-11-10 18:53:30
【问题描述】：

我在这里使用 Mike Bostock 的示例：https://bl.ocks.org/mbostock/4062045

修改了 html 以将节点和链接导出到 json 文件中。不幸的是，我无法上传整个文件，但这里有一些示例行：

{"nodes":[
{"id":"Myriel","group":1,"index":0,"x":791.0400812247225, "y":533.3621312414037,vy":-2.3537711995332984,"vx":-4.361299434636218},
{"id":"Napoleon","group":1,"index":1,"x":761.1221752922569, "y":563.7517203508193,"vy":-2.3317798484016428,"vx":-4.346736342960801},
.
.
.
"links":[{
  "source":
    {"id":"Napoleon","group":1,"index":1,"x":761.1221752922569, "y":563.7517203508193,"vy":-2.3317798484016428,"vx":-4.346736342960801},
  "target":
    {"id":"Myriel","group":1,"index":0,"x":791.0400812247225, "y":533.3621312414037,"vy":-2.3537711995332984,"vx":-4.361299434636218},
  "value":1,"index":0},
    .
    .
    .

我想做的是读取另一个 html 文件中的节点和链接并显示它。

我认为通过将输入文件 miserables.json 文件替换为 xy_miserables.json 文件应该相当简单。我注意到的第一件事是节点没有连接到链接，第二件事是节点分开但链接保持固定。我能够更改模拟参数，使节点保持在其原始位置附近。但是我将如何将链接连接到他们的节点？这是html内容：

<script>
 var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

  var color = d3.scaleOrdinal(d3.schemeCategory20);

  var simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) { return d.id; }));
    //.force("charge", d3.forceManyBody())
    //.force("center", d3.forceCenter(width / 2, height / 2));

d3.json("./xy_miserables.json", function(error, graph) {
   if (error) throw error;

   link = svg.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(graph.links)
        .enter().append("line")
        .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

   node = svg.append("g")
      .attr("class", "nodes")
      .selectAll("circle")
      .data(graph.nodes)
      .enter().append("circle")
        .attr("r", 5)
        .attr("fill", function(d) { return color(d.group); })
        .attr("x", function(d) {return d.x})
        .attr("y", function(d) {return d.y});

console.log(graph.links)

simulation.force("link")
  .links(graph.links);

simulation
  .nodes(graph.nodes)
  .on("tick", ticked);

 function ticked() {
   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; });
 }
});
</script>

我确认链接定义了正确的源 ID 和目标 ID。我将链接信息与原始数据进行了比较，看起来还不错。我在这里忘记了什么？

非常感谢您，马库斯

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

经过一些测试，我意识到问题出在我试图读取的导出的 xyz 文件上。我从 miserables.json 文件开始，并系统地添加了节点和链接属性。事实证明，不需要任何链接属性。这是我的 json 文件的最终解决方案：

{
  "nodes": [
    {"id": "1", "property1": "propert1", "property2": "property2", "property3": "property3", "x": "999.772419601515",  "y": "597.0467800520148",  "vx": "0",  "vy": "0",  "fx": "999.772419601515",  "fy": "597.0467800520148"},
    {"id": "2", "property1": "propert1", "property2": "property2", "property3": "property3", "x": "999.772419601515",  "y": "597.0467800520148",  "vx": "0",  "vy": "0",  "fx": "999.772419601515",  "fy": "597.0467800520148"},....],
"links": [
    {"source": "1", "target": "2, "value": 1},
    {"source": "1", "target": "3", "value": 1},....]
}

现在我的链接已连接到节点。干杯，马库斯

【讨论】：