Question

I see a strange flickering effect after a transition. It is unusual mainly because I do not set the opacity in any way (I want the color to remain the same). Any ideas why this happens?
To have an idea about how the code looks like, here is an example.

var theBars = this.vis.selectAll(".bar" + source.id).data(this.columns);

theBars.enter().insert("svg:rect")
       //some attributes
        .style("fill", sourceColor)
        //some other attributes

theBars.transition()
        //.duration(.01)
        .attr("y", function(d) {
                return this.settings.base - this.getStackedBarHeight(d, source.id);
            }.bind(this))
        .attr("height", function(d) {
                return this.getBarHeight(d.counters[source.id]);
            }.bind(this));

As it can be seen only one line sets the color.
I initially tought I made some mistakes at binding, but after checking some posts here and on Google Groups, I discovered that this flickering usually appears when you have transitions that also change the opacity of the object. Unfortunately I don’t change any opacity, I just make a transition. This effect appears in all major browsers when executing that transition (theBars.transition).

I try to select a bar from a stacked bar and modify its height.

Best regards!

Answer 1

To fix this I added 2 things:

1. in the init phase – I added all the bars but with all counters set
   on 0;

2. in the draw phase – I added this code:

   var theBars = this.vis.selectAll("#bar_"+index+"_"+currentIndex);
   
   this.settings.sources.each(function(pair) {
        theBars
            .style("fill", source.color)
            .attr("height", this.getBarHeight(source.id)
            .attr("y", this.settings.size.baseLine - this.getStackedBarHeight(counters, source.id))
   }, this);
   

The flickering caused by the transitions is gone since we have no transition here. There are still situations in which we need to do a transition, for example when we have several bars with the same word, but there I resolved the flickering by doing it really quick (a .duration(.1) or even less).