1つのページに複数のsvgを持つD3のクリックイベント

Question

私はD3.js経由で挿入された2つのsvgを持つWebページを持っています。私はsvgにクリックイベントを追加することができます。私は直接ボディに追加しました。しかし、私はもう一つのsvgを追加する最初のsvgの上に別の "浮動" divを持っています。クリックイベントを追加しようとすると、そのイベントは発生しません。

私もマウスの位置を追跡しようとしましたが、これは体に追加されたsvgでも機能しました。

rectにクリックリスナーを割り当てることができる方法はありますか？それは「フローティング」divの内部ですか？

私はここでバイオリンを持っている：JsFiddle

ページの最上部にrectをクリックしたときに私は、白とその逆に黒から色を変更するには、しようとしています。どのように可能ですか？

私はまた、あなたが第二のSVG上にマウスを移動した場合、あなたが実際にDRAPと、あまりにも、不要な動作です最初のもの、でズームすることができますことを...

注意をjqueryのアプローチを試してみました。

Answer 1

ここには、希望の効果を達成するためにクラストグルを使用する更新された作業JsFiddleがあります。 JSの関連部分はここにある：

d3.selectAll(".controlBarButton") 
    .classed("white",function(d,i){return rule[i] === "none"}) 
    .on("click",function(){ 
     d3.select(this).classed("white",!d3.select(this).classed("white")); 
    }); 

私も、私はwhiteクラスをトグルに応じて、黒と白の塗りつぶしを設定するためのCSSルールを追加し、pointer-events: none CSSを取り出し線68と79の上に白に、以前のスタイル設定をコメントアウトコントロールバーのすべてのマウスイベントをブロックするルール。