D3 Transitions between classes

Question

I'm struggling to build a transition for text fields in my power. Entering .style manually does not present a problem. The problem I am facing is trying to use the css class to define my styles and transition between them. Using classed works, but the problem is that the transition is not smooth.

The stream I want: - mouseover -> add .highlighted class using a transition - mouseout -> delete .highlighted - using a transition

The following works, but not the use of transitions

 text.highlighted { font-weight : bold; } 

JavaScript code: // variable text indicates selection

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

Reversing classified and transient processes does not work because it is classified by choice and returns a choice. This seems like a trivial problem, but I can't get it to work. Any help would be greatly appreciated.

Answer 1

You will need to define CSS transitions instead of D3. Vendor prefixes are missing from the following

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

Then just set the class to D3:

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