D3のマウスオーバー遷移「スタック」

Question

は、私は、ナビゲーションメニューのための定期的なホバー効果を作成したいとし、代わりにCSSの私はD3が効果を「柔らかく」に移行使用します。これは、.onの方法でmouseoverとmouseoutを使用すると問題なく動作します。しかし、問題は、遷移が行われる前にマウスがホバリングされたリンクを離れると、遷移が止まることです。その副作用をどのように回避するのですか？例えば

は、このコードで、下の境界はまだあなたが速すぎてそれを行う場合は、マウスが、別の場所に移動した後でさえもオレンジ色で表示されます。

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"); }); 

Answer 1

は、私は何が起こっているかを考えるとき、ということですあなただけmouseoverに.transitionを持っているあなたが去る時に1000ミリ秒の期限が切れている前に、 移行はまだそのコースを実行していません。 早送りすると、マウスオーバーの遷移はまだ実行されています（ ）、この遷移をオーバーライドするためにmouseoutイベントに遷移呼び出しがありません。 （どうやらもないmouseoutイベントがmouseoverイベントに関連付けられ.transitionを停止します。）

しかし、あなたが述べたように、あなたがマウスアウトイベントにtransitionを入れて行うときに、 問題が消えます。これは、マウス出力transition がmouseover.transitionよりも優先されるため、mouseoutイベントに.transitionがあると、mouseoutイベントが制御に戻されるためです。

あなたはmouseoutイベントに.transitionをコメントアウトしている場合は、ここでのアクションでそれを見ることができます。また

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

読む価値Scott Murray's今後のD3帳から第10章である：私は完璧な答えを知らないが、私は（1S）マウスアウトを継続する前に呼び出され、完成された疑いがあるhttp://ofps.oreilly.com/titles/9781449339739/_interactivity.html