4

D3.jsを使用して階層的な力の図を生成したいと思います。これは、グラフを子レベル（子間の関係が表示されている）に展開するノードをクリックすることでツリーのような構造をナビゲートできる力指向グラフです。ノードは、親または兄弟の2つの方法で相互に関連付けることができます。親の関係は、ノードがその親に「属している」ことを示します。

出発点として、フォースクラスターの例（https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html）を確認し、上記の関係を含めましたが、理解できません。ネットワーク全体ではなく、拡張されたクラスターのみをレンダリングする方法を説明します（下の画像を参照）。

JSON data:
{"nodes":
        [
        {"name":"Person 0","group":"Person 0"},
        {"name":"Person 1","group":"Person 1"},
        {"name":"Person 2","group":"Person 1"},
        {"name":"Person 3","group":"Person 1"},     
        {"name":"Person 4","group":"Person 3"},
        {"name":"Person 5","group":"Person 3"}  
        ],
"links":
        [
        {"source":1,"target":0,"type":"sibling"},
        {"source":2,"target":1,"type":"parent"},
        {"source":3,"target":1,"type":"parent"},
        {"source":3,"target":2,"type":"sibling"},
        {"source":4,"target":3,"type":"parent"},
        {"source":5,"target":3,"type":"parent"},
        {"source":4,"target":5,"type":"sibling"}
        ]
}

クラスターの拡張

上：力の図。赤いリンクは兄弟関係を示しています。

親の「type」を使用する代わりに、JSONで「children」を子として配置することもできます。

{
"nodes": [
    {
        "name": "Person 0",
    },
    {
        "name": "Person 1",
        "children": [
            {
                "name": "Person 2",
            },
            {
.
.
.
"links": [
    {
        "source": 1,
        "target": 0
    },
.
.

ただし、子ノード間の関係を追跡しながら、ツリー構造をどのように組み合わせるのですか？

想像上の木のような構造は次のようになります。 木

下のセクションは、ビジュアルの望ましいレイアウトを示しています（上の画像と同様の機能）。

進め方について何か提案はありますか？

4

1 に答える 1

0

暗黙的に、同じ直接の親を持つすべてのノードは兄弟です。したがって、ノードが互いに兄弟であるかどうかを追加で追跡する必要はありません。

他の兄弟ノードにのみ関連し、親を持たないノードがある場合 (例の Person 0 と Person 1 の関係など)、ツリー レイアウトは適切な選択ではありません。代わりに、強制レイアウトを試してみてください。

于 2014-05-02T12:40:53.760 に答える