JavaScriptで組織図ツリーを実装したいです。上位ノードをクリックして、下位ノードを順番に表示したいです。

使えそうなライブラリは以下です。

①jQuery Org Chart
http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/

②Google Chart Tools
http://blog.asial.co.jp/870

③SharePoint Org Chart
http://www.thesanitypoint.com/archive/2009/11/11/a-free-sharepoint-org-chart-web-part.aspx

④JIT

基本的に①で実装可能ですが、1点だけ問題があります。

それは添付の写真にあるように、4階層まで開くと「Fruit」と「Bread」の間に空白があることです。下位レベルのノードを考慮して間を空けているのですが、
こうすると横幅が大きくなってしまいます。多少見づらくなっても横幅を狭めたいです。

②も同様の問題があります。

③にある図が求めているものですがJavaScriptでないので保留してます。下層を考慮せずノードの間隔が一定です。（下層の幅が足りなくなった時だけ、上層の横幅が伸びてます）。

④これはHTML5なので一旦保留してます。