仅从链接数据构建力有向图答案

【问题标题】：Constructing Force Directed Graphs From Only Link Data仅从链接数据构建力有向图
【发布时间】：2012-07-13 20:53:04
【问题描述】：

我对 d3.js 有点陌生，但我从中获得了很多乐趣。到目前为止，我已经实现了一个与许多示例和教程非常接近的力导向图。

直接关注

像许多示例一样，我有一个这样的 JSON 结构：

{"nodes": ["node1", "node2",  ... ],
 "links": [{source: 0, target: 1, "field1": 5, ...}, ... ]}

但是，我认为像这样构建我的数据源会更容易：

{"links": [
    {source: "node1", target: "node2", "field1": 5, ...},
    {source: "node2", target: "node4", "field1": 1, ...},
    {source: "node3", target: "node4", "field1": 8, ...}
]}

不是在我的图中显式定义节点，而是在链接结构中隐式定义它们。

原因

我想列出项目的最终目标，以防有人有一些我不知道的特定示例代码或惯用方式。

该项目的目标最终将是一个实时更新的图表。后端正在开发中，可能会进行一些更改和修订。

目前，我正在想象每 X 秒拉下一个更新的 JSON 提要，并使用新信息更新该图的结构。拉取的提要仅包含图形的更新结构，因此脚本需要维护所有已拉取的节点和链接，并在必要时添加任何新的节点和链接。

谢谢！

如果之前有人问过这个问题，我深表歉意。我做了一些搜索，没有找到任何东西。如果我错过了，请随意侮辱和责备我。

【问题讨论】：

标签： json d3.js force-layout

【解决方案1】：

我不得不这样做几次。我发现的最简单的方法是简单地计算基于链接列表的节点集，然后将其转换为数组供力图使用：

var links = [ .... ];
var nodeMap = {};
links.forEach(function(d, i) { 
    nodeMap[d.source] = true;
    nodeMap[d.target] = true;
});

var nodes = [];
for (key in nodeMap)
    nodes.push(key);

d3.layout.force()
         .nodes(nodes)
         .links(links);

【讨论】：

【解决方案2】：

我在示例“D3 Based Force Directed Radial Graph”中就是这样做的。我这样做是因为我想了解数据是如何在内部使用的，独立于 JSON 和 CSV 等结构，这些结构以后总是可以分层。

无论如何，我希望这个例子对你有所帮助。

我最好的，

弗兰克

【讨论】：