D3 le transizioni mouseover si "bloccano"

Dire che voglio creare effetti di hover regolari per un menu di navigazione, ma invece di CSS uso le transizioni D3 per "ammorbidire" l'effetto. Funziona perfettamente con mouseover e mouseout per il metodo .on. Il problema, tuttavia, è che la transizione si blocca se il mouse lascia il collegamento sospeso prima che la transizione sia completata. Come si evita quell'effetto collaterale?D3 le transizioni mouseover si "bloccano"

Ad esempio, con questo codice, il bordo inferiore è ancora visualizzati in arancione anche dopo che il mouse si è spostato altrove, se lo si fa troppo in fretta:

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

fonte

2013-02-18 Anonymous

non so la risposta perfetta, ma ho il sospetto la mouseout viene richiamato e completato prima che la durata (1s) di il mouseover è completato. Forse fare una durata di 1100 per il mouseout? – cmonkey

Inoltre, la lettura su http://bost.ocks.org/mike/transition/ suggerisce che ci sono differenze tra le versioni d3 2 e 3. Quale versione stai usando? – cmonkey

Non hai una risposta perfetta, ma: Se, come nel tuo esempio, stai usando HTML (piuttosto che SVG), puoi saltare le transizioni d3 e utilizzare invece le transizioni css. Ciò risolverà definitivamente il problema che stai avendo, e sarebbe più performante. Gli utenti dei vecchi browser non riceveranno una transizione, ma oh pozzi ... – meetamit

Penso che quello che sta succedendo è che quando hai il .transition solo sulla mouseover, la transizione non ha ancora corso quando esci prima che siano trascorsi 1000ms. Quindi, quando si esce presto, la transizione mouseover è ancora in esecuzione, e non vi è alcuna chiamata di transizione sull'evento mouseout per ignorare questa transizione. (A quanto pare nemmeno l'evento mouseout fermerà la .transition associato all'evento mouseover.)

Tuttavia, come avrete notato, quando si fa mettere un transition sull'evento mouseout, il problema va via. E credo che questo sia dovuto al fatto che il mouseout transition ha la precedenza su mouseover.transition, quindi avere .transition sull'evento mouseout riporta l'evento mouseout nel controllo.

È possibile vederlo in azione qui se si commenta lo .transition sull'evento mouseout.

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

anche la pena di leggere è il capitolo 10 dal Scott Murray's prossimo libro d3: http://ofps.oreilly.com/titles/9781449339739/_interactivity.html

fonte

2013-02-18 21:12:50 mg1075

Grazie mille per aver spiegato! –

L'aggiunta di transizione su mouseout non risolve il problema in questo esempio http://jsfiddle.net/t466vL71/ – bartburkhardt

Ok, risolto questo rimuovendo l'approccio dynamicColor http://jsfiddle.net/w9q6uh25/ – bartburkhardt

D3 le transizioni mouseover si "bloccano"

risposta

Problemi correlati