D3 Переходы между классами

Question

Я борюсь со строительством перехода для текстовых полей в своей силе. Ввод в .style вручную не представляет проблемы. Проблема, с которой я сталкиваюсь, заключается в попытке использовать класс css для определения моих стилей и перехода между ними. Использование classed действительно работает, но проблема заключается не в плавном переходе.

Потока Я хочу: - Mouseover -> добавить .highlighted класса, используя переход - MouseOut -> Удалить .highlighted с помощью перехода

следующих работы, но не использующих переходов

text.highlighted { 
    font-weight : bold; 
} 

JavaScript код: // текст переменной указывает на выбор

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

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

Реверсирование классифицированных и переходных процессов не работает, поскольку классификация работает над выбором и возвращает выбор. Это кажется тривиальной проблемой, но я не могу заставить ее работать. Любая помощь будет принята с благодарностью.

Answer 1

Вам нужно будет определить переходы в CSS вместо D3. Префиксы опущены из следующего

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

Тогда просто установите класс в D3:

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

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