D3 mouseover переходы получает «застрял»

Question

Скажем, я хочу создавать регулярные эффекты наведения для меню навигации, но вместо CSS я использую переходы D3 для «смягчения» эффекта. Это отлично работает с использованием mouseover и 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"); }); 

Answer 1

Я думаю, что происходит в том, что, когда у вас есть .transition только mouseover, переход еще не прошел, когда вы уходите до истечения 1000 мс. Итак, когда вы уезжаете рано, переход мыши по-прежнему работает, и переход на вызов мыши не происходит, чтобы переопределить этот переход. (По-видимому даже не mouseout событие остановит .transition, связанный с mouseover событием.)

Однако, как вы заметили, когда вы поставить transition на событие MouseOut, проблема уходит. И я считаю, что это связано с тем, что мышь transition имеет преимущество перед mouseover.transition, поэтому наличие .transition на событии mouseout возвращает событие mouseout.

Вы можете увидеть это в действии здесь, если вы закомментируете .transition на мероприятии mouseout.

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

Также стоит чтение главы 10 из Scott Murray's предстоящей d3 книги: http://ofps.oreilly.com/titles/9781449339739/_interactivity.html