D3：1つのチャートでズームとツールチップを処理する方法は？

Question

私は基本的に一連の積み重ね棒グラフである視覚化をしています。それぞれのグラフにはいくつかのパネルが含まれています。たとえば、hereは3つの棒グラフで、それぞれ4つのパネルがあります。

私は、チャート全体にわたって調整されたパン/ズーム機能を実装することができました。 Thisは、たとえば、最後の画像から3番目のパネルにズームした場合の外観です。ズームの動作は、各グラフに配置されている目に見えない四角形から呼び出されます。

私の問題は、プロット内のユーザーのカーソルの位置に基づいてツールチップの機能を有効にしたいということです。ただし、ズーム矩形はチャートの上に配置されるため、実際のチャート自体のSVGエレメントにはマウスイベントは登録されません。

誰もがこの問題を回避する方法を知っていますか？

Answer 1

ズームを検出するために使用しているのと同じ矩形にmouseeventを置くことができます。コードサンプルなしで確かに言って、私はあなたがこれらの線に沿って何かを行うことができます期待されるハード：あなたが終わるので、もしイベントに「.tooltip」を追加

svg.select("rect.overlay") 
    .on("mouseover.tooltip", function() { tooltip.style("display", null); }) 
    .on("mouseout.tooltip", function() { tooltip.style("display", "none"); }) 
    .on("mousemove.tooltip", mousemoveFunc); 

は、イベントに名前空間を追加しますズームリスナーと衝突した場合でも、それらに名前空間を追加することができます。

Answer 2

あなたのCSSでは、あなたの拡大矩形のためのスタイルponter-events：noneを入れてください。このようにして、カーソルイベントは要素が吹くことによって感知される。