33

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

基本的に、私は d3.js に基づいた樹形図に基づくことを検討しています (例: http://bl.ocks.org/4063570 )が、「結婚」を表現するものを見つけるのに苦労しました。

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

ここに私のデータがあります

ヘルプ/提案/リンクは大歓迎です! それが可能かどうかはわかりませんが、非常によくできていて、明らかに用途が広いように見えるd3.jsを使用したいと思っています。

4

3 に答える 3

32

いくつかのオプションがありますが、それぞれに少しの作業が必要になると思います。JSON で家系図を表現するための標準が 1 つあると助かります。私は最近、geni.com がこのための非常に詳細な API を持っていることに気付きました。おそらく、API に対してコーディングすることは、再利用性のために良い考えです...

-- 血統樹 --

家系図はあなたのニーズに十分かもしれません。義理の家族をリンク可能にすると、名前をクリックするとグラフが再描画され、血統が表示されます。

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

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

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

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

-- Cluster Dendogram (失敗する理由) --

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

あなた、または他の誰かがこれに取り組む場合は、私に知らせてください。私はその仕事を見て（そして恩恵を受け）たいと思っており、可能であればそれに貢献できるかもしれません.

于 2013-02-22T20:37:19.330 に答える
6

また、D3 で血統書を作成する必要があったので、その方法を考え出しました。基本的な機能を示す例を作成し、展開して子孫を表示するなどの高度な機能を追加しました。

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

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

ここに画像の説明を入力

于 2015-06-04T15:35:59.233 に答える
1

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

于 2015-06-19T10:16:02.893 に答える