5

ナビゲーション メニューに通常のホバー効果を作成したいとしますが、CSS の代わりに D3 トランジションを使用して効果を「柔らかく」します。これは、mouseoverおよび-method を使用すると正常に機能します。ただし、問題は、遷移が完了する前にマウスがホバーされたリンクから離れると、遷移が停止することです。その副作用をどのように回避しますか？mouseout.on

たとえば、次のコードでは、マウスが他の場所に移動した後でも、移動が速すぎると下の境界線がオレンジ色で表示されます。

d3.selectAll("a")
    .on("mouseover", function() { 
       d3.select(this)
      .style("border-bottom-color", "#fff")
      .transition()
      .duration(1000)
      .style("border-bottom-color", "#B23600"); })
    .on("mouseout", function() { 
       d3.select(this)
      .style("border-bottom-color", "#fff"); });
4

1 に答える 1

4

.transitionがオンになっている場合mouseover、1000 ミリ秒が経過する前に終了しても、遷移がまだ実行されていないことが起こっていると思います。そのため、早退しても、mouseover トランジションはまだ実行されており、このトランジションをオーバーライドするための mouseout イベントのトランジション コールはありません。(明らかに、イベントでさえ、イベントに関連付けられたmouseoutを停止しません。).transitionmouseover

ただし、ご指摘transitionのとおり、マウスアウト イベントを実行すると、問題は解消されます。transition これは、 mouseoutが よりも優先されるmouseover .transitionためであると私は信じて.transitionいmouseoutますmouseout。

イベントの.transitionをコメントアウトすると、ここで実際の動作を確認できます。mouseout

http://jsfiddle.net/Ldmv6/1/

また、 Scott Murray の次の d3 ブックの第 10 章も読む価値があります。

于 2013-02-18T21:12:50.157 に答える