web-dev-qa-db-ja.com

d3.jsベースの「家系図」で結婚を表示するにはどうすればよいですか？

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

本質的に私はd3.jsに基づいたデンドログラムに基づいて調べています。 http://bl.ocks.org/406357 ですが、「結婚」を表すものを見つけるのに苦労しました。

以下は、基になるデータの画像です。

here's my data

ヘルプ/提案/リンクは大歓迎です！それが可能かどうかさえわからないのですが、見栄えがよく、明らかに用途が広いので、d3.jsを使用したいと思います。

javascriptd3.jstreevisualizationgenealogy
32
byzantine cucumber

いくつかのオプションがありますが、それぞれに少しの作業が必要になると思います。 JSONで家系図を表すための単一の標準がある場合に役立ちます。私は最近、geni.comにこのための非常に詳細なAPIがあることに気づきました。おそらく、それらのAPIに対するコーディングは、再利用性のための良いアイデアでしょう...

-血統ツリー-

家系図 で十分かもしれません。あなたは義理の人をリンク可能にします、そこで彼らの名前をクリックするとグラフが再描画されるので彼らの血統を見ることができます。

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

血統ツリーに似ていますが、双方向です ブラケットレイアウトツリー を使用すると、「ここに私の親、祖父母、子供、孫」タイプのビューを処理できます。血統ツリーのように、個人をリンク可能にして、ブラケットをそのノードの中央に再配置します。

-力ベースのレイアウト-

有望に思われるいくつかの興味深い力ベースのレイアウトがあります。 スマートラベルを使用したフォースベースのレイアウトの例 を見てください。 「フォース」がどのように決定されるかについてアルゴリズムを調整すると、これが非常に美しいツリーになり、古い世代が新しい世代より上または下になります。

-クラスターのデンドグラム（失敗した理由）-

私が見てきた家系図に最も適したd3.jsレイアウトでは、単一のノードを親と想定していますが、親は2つのノードの組み合わせ（視覚的には「T」）として表す必要があります。はツリーのメンバーであり、義理を表す1つのフローティングノードです。これを行うためにクラスター系統樹を調整することは実行可能ですが、大幅な変更がなければ不可能です。

あなた、またはそのことについて他の誰かがこれに取り組むなら、私に知らせてください。私はその仕事を見て（そしてそれから利益を得たい）、可能であればそれに貢献できるかもしれません。

29
inanutshellus

また、D3で家系図を描く必要があったので、その方法を理解しました。基本的な機能を示し、子孫の展開や表示などの高度な機能を追加する 作成された例 があります。

私はあなたが結婚をどのように表現したいのかわかりません。結婚は祖先の血統に固有ですが、子孫チャートにはありません。このコードは、子孫ノードの配偶者を表示するように適合させることができます。

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

enter image description here

6
user879121

これにはいくつかの作業が必要ですが、基本的に私が提案するアイデアは、円を描画しない関係と呼ばれる特別な種類のノードでフォースレイアウトを行うことです。 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の可能性について何かを明確にしたいと思います。

1
David Lemon