d3 を使用して、関連オブジェクトのインタラクティブな強制指向ツリーを作成しました。ノードとリンクは、d3 ツリー レイアウトを使用して作成されます。
データ構造は次のとおりです。
{
"name": "node name",
"id": 1,
"children": [
{
"name": "child node name",
"id": 2
},
{
"name": "child node name",
"id": 3
},
...
]
},
...
ノード/リンクは次の方法で作成されます。
var nodes = flatten(rootNode);
var links = d3.layout.tree().links(nodes);
ツリーの双方向トラバーサルを有効にするために、新しく作成されたすべてのノードからツリーを再帰的にたどり、すべてのノードに親参照を追加します。
リーフ ノードをクリックすると、ツリーを拡張できます。次に、データが AJAX 経由で読み込まれ、ツリーが更新されます。
これに関する問題は、同じ ID/名前を持つオブジェクトがツリー内で複数回発生する可能性があることです。JavaScriptコードからすべての重複ノード(クロスリンクのためにツリーをグラフに変換する)をきれいにマージする方法はありますか?
編集:これを行う唯一の方法は、ツリー全体をたどって、複製を指すすべてのリンクを再リンクすることです...これにより、スクリプトの速度が大幅に低下する可能性があると思いますが...