javascript - d3 力定向网络的 json 表示

Question

我正在尝试对风险进行网络可视化。您可以在 http://bl.ocks.org/4683850 使用所需代码查看它.

可视化效果很好，但需要大量的体力劳动。我手动调整了 json 文件，使连接具有以下形状:

{
    "source": 1,
    "target": 0,
    "value": 5
} 

需要对 d3 代码做些什么才能使连接由节点的名称确定？输入将是:

{
    "source": "WesternAustralia",
    "target": "NewGuinea",
    "value": 5
} 

每当我尝试时，我都会收到以下错误:

Uncaught TypeError: Cannot call method 'push' of undefined 

Answer 1

D3 文档提供了链接如何工作的解释:

https://github.com/mbostock/d3/wiki/Force-Layout#wiki-links

简而言之，链接数组可以包含 source 和 target 的索引，它们被重新映射到 nodes 的对象，或者它们包含对来自 nodes 本身的对象的引用。您需要将链接的 source 和 target 重新映射到 nodes 中的对象。

假设您的 source 和 target 属性使用上面第二个示例中所示的名称，您可以将以下代码段添加到 d3 的开头。 json 回调以进行重新映射:

    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
    graph.links = graph.links.map(function(x) {
      return {
        source: nodeMap[x.source],
        target: nodeMap[x.target],
        value: x.value
      };
    });