12

現在、 http://nvd3.com/ghpages/lineWithFocus.htmlにある時系列グラフの例をカスタマイズしようとしています。これは、d3 上のライブラリである nvd3 を使用して実装されます。上のグラフのようにデータ ポイントのツールチップを表示したいのですが、例の下の「ビュー ファインダー」グラフのように、同じグラフ内で範囲を選択できるようにしたいと考えています。

そのために、基本的な折れ線グラフの例に「ブラシ」を追加しました ( http://nvd3.com/ghpages/line.htmlを参照)。範囲選択は魅力のように機能しますが、軸の範囲外にあるポイントを除いて、データ ポイントのツールチップは機能しなくなりました。ブラシ領域にあるデータ ポイントがマウス イベントを取得しなくなり、ブラシがそれらすべてを吸収するようです。

線のデータ ポイントがマウス イベントを受け取るようにするには、何を変更する必要がありますか (特に、マウスオーバー、クリックは気にしません)。

試みは、を使用してすべてのイベントをキャッチすることです

d3.select(window).on("...", function)

該当する場合は、データポイント上で「マウスオーバー」イベントをトリガーします。これはどのように達成できますか (すべてのデータ ポイントを調べてから、どれがマウスイベントに最も近いかを確認したくありません...)? もっと簡単な方法はありますか？

4

3 に答える 3

11

「ブラシ」の任意の場所で要素(Chorme)を検査すると、イベントをキャッチしようとしている他のグラフィック要素の後に構築された要素に気付くでしょう。

d3.brush 関数は、マウス イベントをキャッチするために非表示の背景を作成しています。

// An invisible, mouseable area for starting a new brush.
      bg.enter().append("rect")
          .attr("class", "background")
          .style("visibility", "hidden")
          .style("cursor", "crosshair");

したがって、解決策は、データ (線、パス、散布図の円など) をプロットする前にブラシを呼び出すことです。

于 2012-12-11T10:46:22.590 に答える
0

ブラシオーバーレイはマウスイベントを取得するため（必要な場合）、これを回避できるかどうかはわかりません。最終的に、イベントバブリングはDOMツリーに対してのみ機能し、これらの要素はせいぜい兄弟になります。

おそらく、すべてのデータポイントを反復処理する代わりに、ブラシで選択されたデータポイントのみを反復処理できます。d3.touches（container）をチェックしてください

于 2012-11-30T01:20:02.343 に答える