title: How do I handle changing obvious attributes like fill in renderlet when redraw triggers?
body: <p>I have a bar chart. I want to change the fill of specific bars to red based on the value of their data. </p>
  
  <p>I don't want there to be a "flash" when the chart redraws; I never want the user to see the original fill. So it makes logical sense to change the fill of the bars on pretransition so that the color is changed before the bar displays on screen. However, when I try to do this, the bars flash red as they are rendering, but transition back to blue again as they render, making them look exactly the same as the others by the time they finish rendering. See <a href="https://jsfiddle.net/incredi_imp/j5ukyv3c/" rel="nofollow noreferrer">this fiddle</a>. Essentially, I tried this:</p>
  
  <pre><code>barChart.on('pretransition', chart =&gt; {
    chart.selectAll('rect.bar').filter(d =&gt; d.data.value &gt; 18)
    .attr('fill', 'red');
  })
  </code></pre>
  
  <p>How can I get the bars to be red <em>while they are transitioning</em> as well as after they finish rendering? I tried repeating the code on the renderlet as well, but they still transition to blue during the transition, then flash back to red after the transition.</p>
  
  <p>Also, I don't want to turn the transitions off altogether by something like this:</p>
  
  <pre><code>barChart.transitionDuration(0)
  </code></pre>
  
  <p>I want to see the bars grow, just have them be red the entire time.</p>