转换闪烁

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

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）。

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

此致敬礼！

来源

2012-05-23 paxRoman

当你看到闪烁时，你使用什么浏览器？ –

其中全部4个：Chrome，Firefox，Safari和IE。 – paxRoman

selectAll语句对我来说似乎有点奇怪，让我猜想它可能与插入重复的rect元素有关，但是很难说没有看到整个事情 - 是否有可能在jsfiddle中复制此问题？ – Josh

为了解决这个问题我补充两两件事：

- 我说所有的酒吧，但所有柜台上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);

造成过渡的闪烁现象消失了，因为我们这里有没有过渡。还有一些情况我们需要进行转换，例如当我们有几个带有相同单词的小节时，但是我通过非常快速地（（.duration（.1）甚至更少）来解决闪烁问题。

来源

2012-05-29 19:25:52 paxRoman

回答

相关问题