D3 Transitions between classes

Question

I'm struggling with building a transition for the text fields in my force. Typing in the .style manually is no problem. The problem I face is when trying to use a css class to define my styles, and transition between them. Using classed does work but the problem is no smooth transition is done.

The flow I want is: - mouseover --> add .highlighted class using a transition - mouseout --> remove .highlighted using a transition

The following works but not using transitions

text.highlighted {
   font-weight : bold;
}

JavaScript code: //text is variable pointed to a selection

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

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

Reversing classed and transition doesn't work because classed works on a selection and return a selection. It seems like a trivial problem but I can't seem to make it work. Any help would be greatly appreciated.

Answer 1

You'll need to define the transitions in CSS instead of D3. Vendor prefixes omitted from the following

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

Then, just set the class in D3:

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

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