0

d3でグラフを作成しました。カーソルがグラフの上部の線の上を移動すると、マウスは線と相互作用しませんが、下部の場合はそうではありません。一番下の行をスクロールすると、カーソルが変化し、フォーカス四角形を操作できないことを意味します。とにかく、カーソルがグラフの上部のような線を越えていることに気付かないようにする方法はありますか?

グラフは次のとおりです: http://jsbin.com/obAzUNa/9/edit

ありがとう。

4

2 に答える 2

0

CSSでこれを試してください：

path {
  pointer-events: none;
}

編集:わかりました、誰かがこの答えを気に入らなかった. :-( jsbin をざっと見て、パスにポインター イベントを設定すると、要求されたとおりに動作するように見えました。おそらく、解決策が広すぎます。

よく見ると、この例はそのままで問題なく動作しているように見えます。ただし、パスを通過すると、カーソルがちらつきます。おそらくそれはブラウザ固有のものです-わかりません。

しかし、トピックパスにもっと具体的にしましょう

http://jsbin.com/EjINUNI/1/

.topic path {
  pointer-events: none;
}

ブラシはまだ機能しており、カーソルのちらつきや干渉は見られません。

もう 1 つの可能性は、ブラシをソースの順序で後でレンダリングして、パスが最初に来て、ブラシが一番上になるようにすることです。

于 2013-09-04T04:09:03.900 に答える
0

<g>パスを含む要素 (class=topic を使用) は、ブラシ イベントを設定した DOM よりも後に表示さ<g>れます。これにより、パスがブラシの上に置かれるため、パスは<g>最初にポインター イベントを取得し、ポインター アイコンが変化します。

「トピック」パスを挿入して、ブラシの四角形の前に DOM に表示されるようにすると、これは発生しません。すべてのトピックに対して個別に作成するのが最も簡単な<g>場合があるため、その 1 つの要素の位置だけを気にする必要があります。

于 2013-09-04T04:44:41.740 に答える