D3 Przejścia między klasami

Question

Mam problemy z budowaniem przejścia dla pól tekstowych w mojej mocy. Ręczne pisanie w trybie ręcznym nie stanowi problemu. Problem, który napotykam, to próba użycia klasy css do zdefiniowania moich stylów i przejścia między nimi. Korzystanie z classed działa, ale problem polega na tym, że nie jest wykonywane płynne przejście.

Przepływ chcę jest: - po najechaniu myszką -> dodaj .highlighted klasę za pomocą przejścia - mouseOut -> Usuń .highlighted stosując przejście

Poniższe działa, ale nie przy użyciu Transitions

text.highlighted { 
    font-weight : bold; 
} 

kod JavaScript: // tekst jest zmienny wskazywali na wybór

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

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

Odwracanie klasowane i przejście nie działa, ponieważ klasyfikowane działa na zaznaczenie i zwraca zaznaczenie. Wydaje się to banalnym problemem, ale nie mogę sprawić, żeby działało. Każda pomoc będzie bardzo ceniona.

Answer 1

Musisz zdefiniować przejścia w CSS zamiast D3. Prefiksy sprzedawca pominięte w poniższym

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

Następnie wystarczy ustawić w klasie D3:

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

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