CODEWITHSUNDEEP
javascriptcssd3.js
Timbo925
Timbo925

Reputation: 281

D3 Transitions between classes

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.

Upvotes: 6

Views: 2966

Answers (1)

Stephen Thomas
Stephen Thomas

Reputation: 14053

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

Upvotes: 12

Related Questions