1

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

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 Groups 上的一些帖子后，我发现这种闪烁通常出现在您有也会改变对象不透明度的转换时。不幸的是，我没有改变任何不透明度，我只是做了一个过渡。执行该转换 (theBars.transition) 时，此效果会出现在所有主要浏览器中。

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

最好的祝福！

4

1 回答 1

1

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

  1. 在初始化阶段 - 我添加了所有条形图，但所有计数器都设置为 0；

  2. 在绘图阶段 - 我添加了以下代码：

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

由过渡引起的闪烁消失了，因为我们这里没有过渡。在某些情况下，我们仍然需要进行转换，例如，当我们有多个带有相同单词的条时，但我通过非常快速地处理来解决闪烁问题（.duration(.1) 甚至更少）。

于 2012-05-29T19:25:52.863 回答