D3.JSのツリーマップ一貫性のないズーム動作

Question

私はd3.jsのツリーマップで種類のメニューをやろうとしています。ほとんどはうまくいきますが、私は私が指摘できないいくつかの不具合を抱えています。

基本的に時には私のチャートは正しくズームされず、子どもたちがSVGエリア全体を見るのではなく、「ぼんやりしていない」と表示されます。

は、私はそれが別のノードを示す/隠すためのいくつかのデータ操作対アニメーションのタイミングとは何かを持っている必要があります疑いがあるが、実際にそれを把握することはできません。私が考えているかもしれない他の事は、 "親"ノードと "子供"ノードの両方によって登録されているクリックイベントに関連しています。

私はJSBINに同様の例を設定しています。

親/子ノードのクリックイベントをどのように登録/登録解除することができますか（これは問題があっても問題ありません）、またノードの変更を簡単に、可視性。

何か助けてください！

Answer 1

まあ、これは少し異例かもしれませんが、私はこれを克服する方法を見つけました。

基本的に、イベントの登録/登録解除を混乱させるのではなく、クリックが現在のズームレベルのノードからのものでない場合にのみズームを実行しました。

だから、私のzoom機能では、私はifチェックの取り扱いズームを包ん：

function zoom(d) { 

    if(node!=d){ 

    // the rest remains the same 

    } 
} 

いずれかの方法を、私はまだこれが原因クリックイベントから来たソース要素に起こっていたと思いますSVG領域でオーバーラップしている - 単純に言えば、誤ってトリガーされたSVGツリーの最初の（最上位の）いくつかの重複要素によって、クリックイベントがトリガーされていました。

Hereの作業バージョン。

これは他の人に役立つことを願っています！

EDIT：このソリューションは、しかし、完璧ではありません。今すぐクリックするだけで何もしないこともありますが、UIをボルケーグするよりも優れています。誰かが他のアイディアを持っているなら、大歓迎です。