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).

我试着从堆叠的栏杆中选择一个栏杆,修改其高度。

问候您了!

Answer 1

为了解决这个问题,我增加了两件事:

in the init phase - I added all the bars but with all counters set on 0;

在提款阶段 -- -- 我添加了这个代码:

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

转型带来的幻觉已经过去,因为我们在这里没有转型。仍然有些情况我们需要转型,例如,我们用同一个词有几个条条,但在那里,我通过真正快速的(.期限(1)或更少的)解决了这种闪烁。

友情链接