複雑な階層的ツリーレイアウト

Question

私は、階層ツリー（something like this）を作成する必要がありますが、私はいくつかの機能が必要：私は（サイズ、背景画像、フォントなど）を好きなようにノードを設計する

1. 能力を
ドラッグN」ドロップによってノードを接続する
2. 自動レイアウト
3. 能力

私はGoJsを見て、その素晴らしいが、それはキャンバスベースだ、と私はミリアンペアへの道を見つけることができませんでしたしました私は望む通りにノードを正確に見ています（実際には遠く離れていません）。

私はまた、d3.jsを見てきましたが、それはSVGだからノードを設計するのが面倒だからです。

ここでの主なハッスルはレイアウトであり、ノードを接続すると、ドラッグN 'ドロップ自分自身を処理することができます、そこに私のレイアウトを処理できるライブラリがあるので、それらをデザインしてみましょう。そして、図書館にレイアウトのものだけをさせるのですか？

Answer 1

ここにいくつかのサンプルライブラリがあります。

キャンバスを避けたい場合は、ドラッグを実装しようとnは、以下の

CSS3 Family Tree

SlickMap

または他のいくつかのキャンバスベースのライブラリ

JavaScript InfoVis Toolkit's HyperTree/SpaceTree

jsPlumbを見るためにドロップ

Answer 2

遅い回答の間、将来的に他の人を助けることができれば幸いです。 優れたD3.jsライブラリを利用したドラッグアンドドロップツリーです。

http://bl.ocks.org/robschmuecker/7880033

https://gist.github.com/robschmuecker/7880033

例のツリーは、自動レイアウト/サイズ、ズーミング、パンニング、ドラッグアンドドロップを処理し、折り畳み可能です。必要に応じて、すべての側面または一部の側面を削除することができます。