D3类之间的转换

Question

我正努力为我的部队中的文本字段构建转换..style手动输入没问题.我遇到的问题是尝试使用css类来定义我的样式,并在它们之间进行转换.使用classed确实有效,但问题是没有顺利过渡.

我想要的流程是: - mouseover - >使用转换添加.highlighted类 - mouseout - >使用转换删除.highlighted

以下工作但不使用转换

text.highlighted {
   font-weight : bold;
}

JavaScript代码:// text是变量指向选择

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); 
}