d3強制定向網絡的json表示形式

Question

我正在嘗試對RISK進行網絡可視化。 您可以在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
      };
    });