4

リスクのネットワーク可視化を試みています。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
4

1 に答える 1

11

D3 のドキュメントでは、リンクがどのように機能するかについて説明しています。

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

つまり、リンクの配列には、 からオブジェクトに再マップされる および のインデックスを含めるか、sourceそれ自体からオブジェクトへの参照を含めることができます。リンクのとを のオブジェクトに再マッピングする必要があります。targetnodesnodessourcetargetnodes

source上記の 2 番目の例に示すように、プロパティとプロパティが名前を使用していると仮定すると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
      };
    });
于 2013-01-31T17:39:22.197 に答える