title: D3 Transitions between classes
body: <p>I'm struggling with building a transition for the text fields in my force. Typing in the <code>.style</code> 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 <code>classed</code> does work but the problem is no smooth transition is done. </p>
  
  <p>The flow I want is: 
   - mouseover --> add .highlighted class using a transition
   - mouseout --> remove .highlighted using a transition</p>
  
  <p>The following works but not using transitions 
  </p>
  
  <pre><code>text.highlighted {
     font-weight : bold;
  }
  </code></pre>
  
  <p>JavaScript code:
  //text is variable pointed to a selection</p>
  
  <pre><code>function mouseover() {
     text.classed("highlighted", true).transition().duration(1000) 
  }
  
  function mouseover() {
     text.classed("highlighted", false).transition().duration(1000) 
  }
  </code></pre>
  
  <p>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. </p>