javascript - D3类(class)之间的过渡

我正在努力为文本字段构建过渡。手动键入.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)
}

逆转分类和过渡不起作用，因为分类对选择起作用并返回选择。看来这是一个琐碎的问题，但我似乎无法解决。任何帮助将不胜感激。

最佳答案

您需要在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);
}