Przejścia myszy D3 zostają "zablokowane".

Załóżmy, że chcę utworzyć regularne efekty najeżdżania dla menu nawigacji, ale zamiast CSS używam przejść D3, aby "zmiękczyć" efekt. Działa to dobrze przy użyciu metody mouseover i mouseout dla metody .on. Problem polega jednak na tym, że przejście zostaje zablokowane, jeśli mysz opuści ukryty link przed przejściem. Jak uniknąć tego efektu ubocznego?Przejścia myszy D3 zostają "zablokowane".

Na przykład, z tym kodem, dolna granica jest nadal wyświetlany w kolorze pomarańczowym nawet po mysz przeniósł się gdzie indziej, jeśli robisz to zbyt szybko:

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

Źródło

2013-02-18 Anonymous

nie wiem doskonałą odpowiedzią, ale podejrzewam mouseout jest wywoływany i zakończone przed czasem trwania (1s) z wskaźnik myszy jest zakończony. Może zrobić 1100 czas na mouseout? – cmonkey

Ponadto, czytanie na http://bost.ocks.org/mike/transition/ sugeruje, że istnieją różnice między wersjami 2 i 3 d3. Którą wersję używasz? – cmonkey

Nie masz też idealnej odpowiedzi, ale: Jeśli, jak w twoim przykładzie, używasz HTML (zamiast SVG), możesz całkowicie pominąć przejścia w d3 i używać zamiast tego przejść css. To zdecydowanie rozwiąże problem, który masz, i będzie bardziej wydajny. Użytkownicy starych przeglądarek nie otrzymają przejścia, ale oh wells ... – meetamit

myślę, co się dzieje, jest to, że kiedy masz tylko na mouseover, przejście nadal nie przebiegło, gdy opuścisz przed upływem 1000 ms. Tak więc po wyjściu wcześniej, ruch kursora myszy nadal działa, i nie ma żadnego wywołania przejściowego w zdarzeniu mouseout, aby zastąpić to przejście. (Najwyraźniej nawet zdarzenie mouseout zatrzyma .transition związanego ze zdarzeniem mouseover.)

Jednak, jak zauważył, kiedy robisz umieścić transition na razie mouseout, problem zniknie. I wierzę, że to dlatego, że mouseout transition ma pierwszeństwo przed mouseover.transition, więc o .transition na razie mouseout stawia zdarzenie mouseout z powrotem pod kontrolą.

Możesz zobaczyć to w akcji tutaj, jeśli skomentujesz .transition na wydarzenie mouseout.

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

Warto również odczyt jest rozdział 10 z Scott Murray's nadchodzącej książki D3: http://ofps.oreilly.com/titles/9781449339739/_interactivity.html

Źródło

2013-02-18 21:12:50 mg1075

Wielkie dzięki za wyjaśnienie! –

Dodawanie przejścia na mouseout nie rozwiązuje problemu w tym przykładzie. http://jsfiddle.net/t466vL71/ – bartburkhardt

Ok, rozwiązano to przez usunięcie metody dynamicColor http://jsfiddle.net/w9q6uh25/ – bartburkhardt

Przejścia myszy D3 zostają "zablokowane".

Odpowiedz

Powiązane problemy