2

次のような JSON ファイルがあります。

{
    Object: {
        children: Array[4]
        ...
    Object: {
        children: Array[1]
            Object: {
                 children: Array[3]
                 ...
            },
            Object: {
                 children: Array[1]
                 ...
            },
        ...
    }
    ...
}

配列は、数レベルの深さの子の配列を含む子の配列を持つ一連のオブジェクトです。

私の問題は、これを d3 フォース レイアウトで使用するノードとリンクのセットに変換しようとすると、正しく表示できないことです。array.map または forEach を使用して、再帰的にすべてのオブジェクトを調べて自分でリンクを作成しようとしましたが、これは非常に面倒です。

このデータを強制レイアウトで表示する準備を整える簡単な方法はありますか? 私は何が欠けていますか？

4

3 に答える 3

2

必要なコードを含む例を見つけました。この関数は、データを平坦化します。それは私が使用しているものなので、Coffeescriptにあります。

flatten: (root) =>
    nodes = []
    i = 0
    recurse = (node) =>
        if node.children
            node.size = node.children.reduce(
                (p, v) -> p + recurse(v)
            , 0)
        if !node.id
            node.id = ++i
        nodes.push(node)
        node.size
    root.size = recurse(root)
    nodes

その後、tree.layout().links() を実行するだけで、手動でリンクを生成する必要がなくなりました。

@nodes = @flatten(@root)
@links = d3.layout.tree().links(@nodes)

これはドキュメントやwikiに記載されていないため、誰かの助けになることを願っています.

于 2013-01-25T20:55:26.090 に答える
2

強制指向のレイアウトではなく、D3.js で Reingold-Tilford ツリーを使用することをお勧めします。そうすれば、データはすでに適切な形式になっており、レイアウトもうまく機能する可能性があります。

真の強制指向レイアウトを使用したい場合は、データを D3 が期待するフォーマットに書き直す必要がnodesあります。linksいずれにせよ、これはネットワーク グラフの標準的な論理構造です。

于 2013-01-25T12:09:17.140 に答える