Question

过渡后我看到一种奇怪的闪烁效果。这很不寻常，主要是因为我没有以任何方式设置不透明度（我希望颜色保持不变）。任何想法为什么会这样？要了解代码的外观，这里有一个例子。

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

可以看出只有一行设置颜色。我最初认为我在绑定方面犯了一些错误，但在检查了这里和Google网上论坛上的一些帖子之后，我发现当你的转换也会改变对象的不透明度时，通常会出现这种闪烁。不幸的是，我没有改变任何不透明度，我只是进行过渡。执行该转换时，此效果会出现在所有主流浏览器中（theBars.transition）。

我尝试从堆叠条中选择一个条并修改其高度。

祝你好运！

Answer 1

为了解决这个问题，我添加了两件事：

在初始阶段 - 我添加了所有栏，但设置了所有计数器 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);

过渡引起的闪烁消失了，因为我们在这里没有过渡。在某些情况下我们需要进行转换，例如当我们有几个具有相同单词的条形图时，但是我通过快速（a .duration（.1）甚至更少）来解决闪烁问题。 / p>

过渡闪烁

1 个答案: