ユーザーがブランチをクリックして折りたたんだり展開したりできるツリーレイアウト(例)に取り組んでいます。
私の例では、小さすぎるコンテナーを使用して、大きなチャートで子ノードをクリックするとどうなるかを示しました。子ノードは単純に svg コンテナーをオーバーフローし、ビューから隠されます。
その場合、一番右のノードが非表示にならないように、レイアウト全体を左に移動/アニメーション化する方法はありますか? もちろん、ノードが再び折りたたまれたときに、レイアウトを再び右に変換したいと思います。私が探している効果は、グラフの右端をクリックしたときのhttp://mbostock.github.io/d3/talk/20111018/#19のようなものです。前のノードは左にフェード オフします。また、左側をクリックすると元に戻ります。
レイアウト自体を翻訳する必要があることはわかっていますが、d3 を初めて使用する人として、レイアウトをいつ翻訳する必要があるかを判断するための適切なアプローチがわかりません。たとえば、すべてのノードの一番右側を見て、その座標がコンテナーの幅内にあるかどうかを確認する必要がありますか? どこを確認するのがベストでしょうか?