d3 opacity transitions flash final state

Question

I have a number of basic opacity transitions along the lines of

emp_line.transition()
    .duration(1250)
    .attr('opacity', 1)

However, when I run them, often these items will flash to full opacity and then back to none and fade in. Is there any way to prevent this content flickering?

Solution

Testing this, it looks like you get the flicker with .attr('opacity'), but not with .style('opacity'), so changing the transition to .style() should fix this.

Test fiddle: http://jsfiddle.net/nrabinowitz/Y5uX6/

No idea why this should be true though :(.

Comments

[futuraprime]

Works a treat. At a guess... perhaps this is a bug in the SVG engine? Using .style means it's relying on CSS instead, which is maybe more refined/has had more attention from browser developers.

[Josh]

This thread on the d3 google group might also be applicable here, related to transitioning from a zero value and the way javascript interpolates the numbers: groups.google.com/forum/#!msg/d3-js/hRlz9hndpmA/BH89BQIRCp4J