5

階層ツリー（このようなもの）を作成する必要がありますが、いくつかの機能が必要です：

  1. 好きなようにノードをデザインする機能 (サイズ、背景画像、フォントなど)
  2. 自動レイアウト
  3. ドラッグ アンド ドロップでノードを接続する機能

私はGoJsとその素晴らしいものを見てきましたが、それはキャンバスベースであり、ノードを希望どおりに正確に見せる方法を見つけることができませんでした(実際にはリモートで閉じることさえできません)。

私はd3.jsも見てきましたが、これも素晴らしいですが、SVG であるため、ノードを設計するのは困難です。

ここでの主な問題はレイアウトであり、ノードを接続すると、ドラッグ アンド ドロップを自分で処理できます。レイアウトを処理できるライブラリはありますか。必要な div を作成し、それらを適合を確認して、ライブラリにレイアウトだけを任せますか?

4

2 に答える 2

4

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

キャンバスを避けたい場合は、以下のドラッグアンドドロップを実装してみてください

CSS3 家系図

スリックマップ

または、いくつかのキャンバスベースのライブラリを参照してください

JavaScript InfoVis Toolkit の HyperTree / SpaceTree

jsPlumb

于 2013-02-19T10:25:30.883 に答える
2

遅い答えですが、将来的に他の人に役立つことを願っています。これは、優れた D3.js ライブラリを利用したドラッグ アンド ドロップ ツリーです。

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

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

この例のツリーは、自動レイアウト/サイズ変更、ズーム、パン、ドラッグ アンド ドロップを処理し、折りたたみ可能です。必要に応じて、すべての側面を削除することも、まったく削除することもできません。

于 2013-12-10T15:36:29.130 に答える