D3 Übergänge zwischen den Klassen

Question

Ich habe Schwierigkeiten, einen Übergang für die Textfelder in meiner Stärke zu erstellen. Die Eingabe in .style manuell ist kein Problem. Das Problem, dem ich gegenüberstehe, ist, wenn ich versuche, eine CSS-Klasse zu verwenden, um meine Stile zu definieren und zwischen ihnen zu wechseln. Die Verwendung von classed funktioniert, aber das Problem ist kein reibungsloser Übergang erfolgt.

Der Fluss ich will, ist: - Mouseover -> .highlighted Klasse fügen Sie einen Übergang mit - mouseout -> entfernen

Folgende Arbeiten einen Übergang .highlighted verwenden, aber nicht mit Übergängen

text.highlighted { 
    font-weight : bold; 
} 

JavaScript-Code: // Textvariablen auf eine Auswahl darauf

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

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

Das Umkehren von Klassen und Übergängen funktioniert nicht, da Klassifizierungen für eine Auswahl funktionieren und eine Auswahl zurückgeben. Es scheint ein triviales Problem zu sein, aber ich kann es nicht funktionieren lassen. Jede Hilfe würde sehr geschätzt werden.

Answer 1

Sie müssen die Übergänge in CSS anstelle von D3 definieren. Vendor-Präfixe ausgelassen aus der folgenden

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

muss dann nur noch die Klasse in D3:

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

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