D3で相互に相互作用するSVG要素を重ねることは可能ですか？

Question

基本的にナビゲーション要素である棒グラフがあるので、バーの上で簡単に予測可能なロールオーバー動作が必要です。基本的に、小さなバーが大きなバーと同じくらい簡単にクリックされていることを確認する必要があるので、列全体をクリック可能なロールオーバーにしました。

ここに私が言及している行動の例は次のとおりです。

スクリーンショットhttp://img6.imageshack.us/img6/6674/screengraph.png

私はD3とSVGでこれをしようとしましたが、SVG要素とDIV（またはSVG要素と他のSVG要素の間のZインデックスを管理することが困難であることがわかりました。点）。しかし、私が探していたものを実現する唯一の効果的な方法は、各列を3つの別々のSVG要素、本質的に上部、バー、そして下部の背景にし、3つのアイテムすべてを手動で発射することであると結論付けたことを覚えています。それらの1つがホバリングされたときはいつでも、ロールオーバーの変化を示します。

私は最終的にSVGを捨てて、すべてのDIVを使用してD3を使用してスケールメソッドに使用し、Nockout.jsテンプレートを使用してすべてを手で描画しました。しかし今、私は200ラインのリファクタリングされたJavaScriptを見ていますが、おそらくD3が私によりクリーンなソリューションを与えてくれたのではないかと思っています。 D3で私が探していることを簡単に達成できたものは何もありませんでしたか？

Answer 1

列を簡単にホバリングできるようにしてくれてうれしいです！これに使用する手法は、ポインターイベントを備えた目に見えないオーバーレイです。

各バーの構造は次のようになります。

<g class="bar" transform="translate(0,…)">
  <rect class="green"></rect>
  <rect class="overlay"></rect>
</g>

（おそらく、スクリーンショットのハイライトされた「14」のように、追加したいことがあるかもしれません。

オーバーレイ長は、チャートのフルハイトです（例では70px）。次のスタイルがあります。

.overlay {
  fill: none;
  pointer-events: all;
}

緑の長方はバーの高さに過ぎず、垂直にオフセットされるため、バーの底はy = 0になります。赤い負の長方形についても同じ取引。

一言で言えば、ポインターイベントを備えた目に見えない長方形はすべて、そのバーのすべてのポインターイベントを受け取ります。したがって、親G要素のホバースタイル、ホバーのバーの色を微調整することを使用できます。

.bar:hover .green {
  fill: lightgreen;
}

同様に、親G要素またはオーバーレイ担当者に「マウスオーバー」および「マウスアウト」イベントを登録できます。