Как не прерывать переход d3 на мыши на мыши?

Question

У меня есть кусок кода, который перемещает линию на mouseover так:

some_svg 
    .on("mouseover", function() { 
     my_line.transition().attr("transform", function(d) { 
      return "translate(" + [d.new_x, d.new_y] + ")"; 
     }); 
    }) 

Однако допустим переход занимает целую секунду, чтобы закончить (я считаю, что это d3 по умолчанию), если бы я, чтобы переместить мышь над some_svg, затем быстро переместите мышь до одной секунды, затем линия остановится, как только я вытащу мышь, и она будет частично выполнена с переходом. Другими словами, линия будет в некоторой позиции между старой и новой позицией.

Как я могу убедиться, что переход всегда будет завершен, независимо от того, перемещаю ли мы мышь (если я не перевешу его обратно на другой some_svg)?

Answer 1

Продолжительность по умолчанию (если вы ее не задали) составляет 250 мс.

Простейший способ не прерывать переход mouseover не устанавливает поведение mouseout, которое изменяет переход. Пока вы не переходите к элементу с обработчиком событий mouseover/mousemove, который мешает текущему переходу, переход завершится. При этом я не могу понять или воспроизвести ваше заявление («», линия останавливается, как только я вывожу мышь, и она будет частично выполнена с переходом »).

Это легко подтвердить: наведите указатель мыши на прямоугольник ниже. Он завершит переход, несмотря на то, что вы вытащите мышь из него.

d3.select("rect").on("mouseover", function(){ 
 
\t d3.select(this).transition().duration(5000).attr("transform", "translate(350, 0)"); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<svg width="400" height="200"> 
 
\t <rect x="0" y="50" width="40" height="20" fill="teal"></rect> 
 
</svg>