5

私はこれに似たものを構築するように任命されており、効果的な解決策のためにいくつかの提案/意見が必要です：

http://familyecho.com

これまで、入れ子集合モデルを使用してデータを表現しようとしましたが、これで複数の親ノードを持つことは不可能だと思います。私が見たほとんどすべての例には、複数の子を持つ1人の親しか含まれていません。また、見栄えがよく、ほとんどすべての表示の問題を解決するGoogle Visualization Organization Chartを使用してみましたが、ノードが1つの親しかサポートしていないという同じ問題が発生しました。だから私は自分で何かを作ってみようと思ったのですが、それはあまり運がありませんでした。

ツリーを正しく表示することに関して、最大の問題の1つは、ノードを適切な場所に配置する方法を見つけることです。Family Echoでは、他の周囲のノードと衝突しないように、親ノードが子の数に応じて適切に配置されていることに注意してください。私は少なくともこの動作を再現しようとしているので、ヒントをいただければ幸いです。私が試したのは、ファミリに関するすべてのデータを含む次のような配列をループすることでした。

    {
    508 : {
        "id" : 1,
        "name" : "Son",
        "Parent" : {
            17864 : {
                "id" : 2,
                "name" : "Father"
            },
            65926 : {
                "id" : 3,
                "name" : "Mother"
            }
        }
    },
    17864 : {
        "id" : 2,
        "name" : "Father",
        "Partner" : {
            65926: {
                "id" : 3,
                "name" : "Mother"
            }
        },
        "Son/Daughter" : {
            508 : {
                "id" : 1,
                "name" : "Son"
            }
        }
    },
    65926 : {
        "id" : 3,
        "name" : "Mother",
        "Partner" : {
            17864: {
                "id" : 2,
                "name" : "Father"
            }
        },
        "Son/Daughter" : {
            508 : {
                "id" : 1,
                "name" : "Son"
            }
        }
    }
}

（508、17864、65926は、各ファミリメンバーの一意のランダムキーとして機能します）、次に、いくつかの再帰関数を使用して、繰り返しなしで、各メンバーの計算されたx/y座標を含む2番目のクリーナー変数を作成します。以下の2番目の変数の例：

{
    508 : {
        "id" : 1,
        "name" : "Son",
        "x" : 0,
        "y" : 0
    },
    17864 : {
        "id" : 2,
        "name" : "Father",
        "x" : 1,
        "y" : -1
    },
    65926 : {
        "id" : 3,
        "name" : "Mother",
        "x" : -1,
        "y" : -1
    }
}

次に、この2番目の変数をループして、絶対位置を使用して固定寸法のDIVを描画し、X座標とY座標を使用して左右のCSS値を変更します。これは良いアプローチですか、それとももっと良い方法がありますか（または、物事をスピードアップするためのグーグル組織図の視覚化のようなもの）？

4

1 に答える 1

2

これはD3.jsの仕事のように思えます。

D3.js は、データに基づいてドキュメントを操作するための JavaScript ライブラリです。D3 は、HTML、SVG、および CSS を使用してデータに命を吹き込むのに役立ちます。D3 は Web 標準に重点を置いているため、強力な視覚化コンポーネントと DOM 操作へのデータ駆動型アプローチを組み合わせて、独自のフレームワークに縛られることなく、最新のブラウザーの全機能を利用できます。

于 2012-09-08T15:11:45.290 に答える