D3 Transizioni tra classi

Question

Sto lottando con la creazione di una transizione per i campi di testo nella mia forza. Digitando il numero .style manualmente non ci sono problemi. Il problema che devo affrontare è quando provo a usare una classe css per definire i miei stili e la transizione tra loro. L'utilizzo di classed funziona ma il problema non è una transizione fluida.

Il flusso di quello che voglio è: - mouseover -> aggiungere classe .highlighted utilizzando una transizione - mouseOut -> Rimuovi .highlighted utilizzando una transizione

I seguenti opere, ma che non utilizzano le transizioni

text.highlighted { 
    font-weight : bold; 
} 

codice JavaScript: // testo è variabile puntata una selezione

function mouseover() { 
    text.classed("highlighted", true).transition().duration(1000) 
} 

function mouseover() { 
    text.classed("highlighted", false).transition().duration(1000) 
} 

L'inversione di classi e la transizione non funzionano perché le opere classificate su una selezione e restituiscono una selezione. Sembra un problema banale ma non riesco a farlo funzionare. Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

È necessario definire le transizioni in CSS anziché in D3. prefissi vendor omessi dalla seguente

text { 
    font-weight: normal; 
    transition: font-weight 1000ms; 
} 
text.highlighted { 
    font-weight: bold; 
} 

Poi, basta impostare la classe in D3:

function mouseover() { 
    text.classed("highlighted", true); 
} 

function mouseover() { 
    text.classed("highlighted", false); 
}