d3.jsで家系図を作成するにはどうすればよいですか？
現在、小さな系図の実験に取り組んでおり、下の写真のような単純な家系図を実装したいと考えています。
これまでの最良の検索結果は、子が親ノードのみを持つことができる例のみをもたらしました。しかし、必要なのは、エンティティ間のリンク（父から母へ）と、ノードと他のリンク間のリンク（子から父-母リンク）を作成する機能です。現在、このための固定データスキーマはありません。
このために d3.js を選択しました ジョブを実行できるように見えるため 。どのように、どこから始めればいいのかわかりません。 d3.jsに関するチュートリアルは、棒グラフなどの標準グラフのみを対象としています。
誰かが私を助けてくれることを願っています。
私のアプローチは次のとおりです。
添付の図に示した例を見てみましょう。
Jenny Of OldstonesもAegon Vの子ですが、この子の違いはAegon Vの他の子供たちは、この場合、その間のリンクを描いていません。
これは、ノードJSONの例でノードをno_parent：trueに設定することで実行されます。
//Here Q will not have a parent
{
name: "Q",
id: 16,
no_parent: true
}
コードで_elbow function_をチェックします。これにより、コードとその親の間に線を描画しません。
if (d.target.no_parent) {
return "M0,0L0,0";
}
次のシナリオは、NodeAerys IIとRahellaの間のリンクです。このノードには子のセットがあります。
hidden: true,としてマークされたそれらの間にノードを作成しました- そのようなノードの
display:noneを作成します。子はノードとAerys IIとRahellaの間の線から来ているようです
JSONの例：
//this node will not be displayed
{ name: "",
id: 2,
no_parent: true,
hidden: true,
children: [....]
}
コードで、四角形を作成する場所を確認します。以下のコードはノードを非表示にします。
.attr("display", function (d) {
if (d.hidden) {
return "none"
} else {
return ""
};
})
完全なコードはこちらにあります： http://jsfiddle.net/cyril123/0vbtvoon/22/
上記の例では、ノード名A/B/C ...を使用していますが、要件に応じて変更できます。テキストを中央揃えにする必要があります。
フローを理解できるように、コードにコメントを追加しました。不明な点がある場合に備えて、コメントしてください。
dTree は、D3の上に構築されたオープンソースライブラリで、家系図（または同様の階層グラフ）を作成します。
D3グラフを手動で生成する面倒な部分を処理し、単純なjsonデータ形式を使用します。
[{
name: "Father",
marriages: [{
spouse: {
name: "Mother",
},
children: [{
name: "Child",
}]
}]
}]
変更に興味がある場合は、ノードレンダリングとイベントハンドラーのコールバックをサポートします。最後に、ライブラリは2016年現在開発中であり、プルリクエストを歓迎します。
免責事項：私はdTreeの著者です。あなたがしたようにウェブを検索した後にライブラリを作成しましたが、私の好みには何も見つかりませんでした。
私はこの質問がかなり古いことを知っていますが、まだ興味がある人は 私のサンプル を見てください。
不幸なニュース：私が行った研究は、これを直接達成するためにすぐに使えるd3ライブラリがないことを示していますカスタマイズ。
The good news：これを調べて、素晴らしい出発点を見つけた人が他にもいました！これは手元のタスク全体に対する完全な解決策ではないことを認識していますが、これまでの困難の大部分は単にどこから始めればよいかを考え出すことでした（例えば、「d3.jsに関するチュートリアルは標準棒グラフのようなグラフ。」）。より良いものがない場合は、少なくともここでその部分に対応します。
最初に、数年前の この関連するstackoverflow post への応答で、inanutshellusはareが利用でき、ここで使用できる優れたd3ツールを提供します。軽いカスタマイズ/拡張機能を使用すると、比較的迅速に目的地に到達できるはずです。後世のために、inanutshellusの答えをここに再現します。
いくつかのオプションがありますが、それぞれに少し手間がかかると思います。 JSONで家系図を表すための単一の標準があれば役立ちます。最近、geni.comにはこのための非常に詳細なAPIがあることに気付きました。おそらく、APIに対してコーディングすることは、再利用性のための良いアイデアでしょう...
-系統樹-
血統ツリー で十分かもしれません。義理のリンク可能にします。名前をクリックすると、グラフが再描画され、その系統を見ることができます。
-ブラケットレイアウトツリー-
血統ツリーに似ていますが、双方向であるため、この ブラケットレイアウトツリー を使用すると、「ここに私の両親、祖父母、子供、孫がいます」タイプのビューを処理できます。系統樹のように、個人をリンク可能にして、そのノードのブラケットの中心を再設定します。
-強制ベースのレイアウト-
有望と思われる興味深い力ベースのレイアウトがいくつかあります。 スマートラベルを使用した力に基づくレイアウトのこの例 をご覧ください。 「力」がどのように決定されるかについてアルゴリズムを調整すると、これが非常に美しいツリーになり、古い世代が新しい世代の上または下になります。
-クラスターデンドグラム（失敗の理由）-
私が見たd3.jsレイアウトは、単一のノードが親であると仮定して家系図に最適であるのに対し、親を2つのノードの組み合わせ（視覚的に「T」）として表す必要があります。ツリーのメンバーであり、義理を表す1つのフローティングノードです。これを行うためにクラスター樹形図を調整することは可能ですが、大幅な変更が必要です。
もしあなたが-またはそのことについて他の誰かが-これに取り組むならば、私に知らせてください。私はその作品を見て（そしてその恩恵を受けたい）、可能であれば貢献できるかもしれません。
具体的な実装に関しては、mj8591は この質問 に別の問題を持つ類似の家系図について尋ねました。ただし、幸いなことに、その質問には、必要なほとんどまたはすべてのコンポーネントを含むフィドル（すべてのjsコード）が含まれ、 mdmlからの応答 には、より詳細な「クリック可能性」を追加する別のフィドルが含まれます各ノードに。
繰り返しますが、それは自動化されたものではありませんが、うまくいけば、これらのリソースで素晴らしいスタートを切ることができます！
dtree を試してみて、気に入った。ただし、複数の世代を追加すると、水平ディスプレイにより、ディスプレイ全体が非常に大きくなり、扱いにくくなる可能性があります。代わりに、 Reingold–Tilford Tree を使用しました。このツリーの欠点の1つは、各ノードに親を1つしか持てないことです。配偶者を並べて表示することはできません。それを木に。
質問の3年後に答えます。
マイクからの血統ツリーグラフがあります。
https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
次に、このd3.treeがあります-家系図 https://bl.ocks.org/mell0kat/5cb91a2048384560dfa8f041fd9a0295
マイクからD3 Tidy Treeをもう一度試すこともできます https://beta.observablehq.com/@mbostock/d3-tidy-tree
あなたがd3.jsを使用するつもりだと言ったが、jsplumbと呼ばれる使用を検討したい別のツールがあるので、これがあなたにとって助けになるかどうかはわかりません。この種のプロジェクトに最適なようです： home page 。また、いくつかのきちんとしたチュートリアルもあります。 ドキュメントのようなもの 、および よりインタラクティブな があります。
先ほど言ったように、技術を切り替えるのに遅すぎなければ、これは試してみる価値があるかもしれません。それはすべてhtml、css、およびjavascriptなので、過酷な移行であってはなりません。