d3.jsベースの「ファミリーツリー」に結婚式を表示するにはどうすればよいですか？

Question

私はHTML/CSS開発者です。は意味のある方法で結婚式（もちろん家族の外から）を表示する必要がある 'ファミリーツリー'を構築するためのJavaScriptソリューションを研究しています。

私は本質的に、d3.jsに基づいた樹状図に基づいています。 http://bl.ocks.org/4063570しかし、私はそこに「結婚」を表現するものを見つけるのに苦労しました。以下は

私は時にそれを基づかれるデータの画像です：

すべてのヘルプ/提案/リンクいただければ幸いです！私はそれが可能であるかどうかは分かりませんが、d3.jsが使いやすいと思われるので、d3.jsを使いたいと思います。

Answer 1

いくつかのオプションがありますが、それぞれが少しの作業を必要とすると思います。 JSONでファミリーツリーを表すための単一の標準があれば役立ちます。私は最近、geni.comにこれに関するかなり深いAPIがあることに気づいた。おそらく、彼らのAPIに対してコーディングは再利用のために良いでしょう...

- 血統の木 -

The Pedigree Treeは、あなたのニーズには十分かもしれません。あなたは義理のリンクを作ることができます。名前をクリックするとグラフが再描画され、その系統を見ることができます。

- ブラケットレイアウトツリー -

血統ツリーに似ていますが、双方向、このBracket Layout Treeは、あなたが「ここに私の両親である、祖父母、子、孫」タイプのビューを処理することができます。ペディグリーツリーと同様に、ノードをブラケットの中心に戻すようにリンクできるようにします。

- フォースベースのレイアウト -

有望なようで、いくつかの興味深い力ベースのレイアウトがあります。 this example of a force-based layout with smart labelsを見てください。 "力"がどのように決定されたかをアルゴリズムに合わせて調整することで、これを非常に美しいツリーにすることができます。

- クラスタ系統樹（なぜそれが失敗した） -

家族の木に最高の自分自身を貸すだろう、私が見てきたd3.jsレイアウトは、あなたが表現するために必要なのに対し、単一のノードは、親であると仮定ツリーのメンバーである1つのノードと、義理を表す1つのフローティングノードの2つのノード（視覚的には「T」の間）の組み合わせとして親を使用します。これを行うためにクラスタの樹状図を調整することは実現可能であるべきであるが、大きな変更を加えることはできない。

あなた、または他の誰かがこの問題に取り組んでいれば、私に教えてください。私は仕事を見たい（そしてそこから恩恵を受ける）のが好きで、実行可能ならばそれに貢献することができるかもしれません。

Answer 2

私はD3で家系図を描く必要がありました。私はcreated examplesに基本的な機能を示し、拡張や子孫の表示などの高度な機能を追加しています。

どのようにして結婚を表示したいのですか。結婚は先祖の系統に内在していますが、子孫図にはありません。このコードは、子孫ノードに配偶者を示すように適応させることができます。

これはどのように見えるかの写真です。スタイルは必要に応じて微調整できます。

Answer 3

これは、いくつかの作業が必要ですが、基本的に私が提案するアイデアは、円を描画しない関係と呼ばれるノードの特殊な種類の力のレイアウトを行うことです。これは2つのサブジェクト間のバインドを表し、より多くのノードの親になることができます。

d3では、すべてのデータ構造を必要に応じて拡張できます。その後、データをバインドする作業が増えますが、すべてカスタマイズできます。ここでは、フォースレイアウトで使用するデータ構造のサンプルを示します。

{ 
    "nodes": [ 
    { 
     "type": "root", 
     "x": 300, 
     "y": 300, 
     "fixed": true 
    }, 
    { 
     "type": "male", 
     "name": "grandpa" 
    }, 
    { 
     "type": "female", 
     "name": "grandma" 
    }, 
    { 
     "type": "relationship" 
    }, 
    { 
     "type": "male", 
     "name": "dad" 
    }, 
    { 
     "type": "female", 
     "name": "mum" 
    }, 
    { 
     "type": "relationship" 
    }, 
    { 
     "type": "male", 
     "name": "I" 
    } 
    ], 
    "links": [ 
    { 
     "source": 0, 
     "target": 2 
    }, 
    { 
     "source": 1, 
     "target": 2 
    }, 
    { 
     "source": 0, 
     "target": 3 
    }, 
    { 
     "source": 3, 
     "target": 4 
    }, 
    { 
     "source": 4, 
     "target": 6 
    }, 
    { 
     "source": 5, 
     "target": 6 
    }, 
    { 
     "source": 6, 
     "target": 7 
    } 
    ] 
} 

私はd3の可能性について何かを明確にしました。