Jsでクリックすると木構造が表示されていくコード

Question

言葉では伝わらないと思ったのでやりたいことを絵にしました。

Aが真ん中に表示されています。
クリックします。
#↓

木構造でAの中にあったBが真ん中に表示され、Aは左にずれます。

こういった木構造がどんどんクリックされると分岐されていくようにしていきたいのですが、フロントのプログラムが全く思いつきません。
誰かアドバイスくれるとありがたいです。

Answer 1

https://github.com/dabeng/OrgChart

こういうプラグインがいくつもネット上にあるので、利用しては？

Comments

[masateru2]

うわああああああああ
これめっちゃすごいです！！！！

Answer 2

趣旨と変わってしまいますが、プログラムに入る前に、先に木構造の描画をしてみるのはどうでしょうか。

ul、ilで組んだ簡単なサンプル

Comments

[kszk311]

また、PHPのタグ付いていますが、クリックした次の階層をPHPでDBなりどこかから取得したいとかでしょうか。
PHPが関係しなければ、外してください。

[masateru2]

どちらで行おうか迷っていたので、両方のタグで質問しました。

Answer 3

グラフィカルにやりたいならcanvasやsvgでの処理になるのでしょう
単純に木構造というだけであればul-liで組んでも近いことはできると思います