Question

我对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提要并使用新信息更新该图的结构。拉出的Feed只包含图表的更新结构，因此如果需要，脚本需要维护所有已拉动的节点和链接并添加任何新节点。

谢谢！

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

Answer 1

我在示例“D3 Based Force Directed Radial Graph”中做到了这一点。我之所以这样做，是因为我想要了解数据的内部使用方式，与JSON和CSV等结构无关，后者可以随后进行分层。

无论如何，我希望这个例子可以帮助你。

我最好，

谢

Answer 2

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

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 个答案: