轉換閃爍

轉換後我看到奇怪的閃爍效果。這是不尋常的，主要是因爲我沒有以任何方式設置不透明度（我希望顏色保持不變）。任何想法爲什麼發生這種情況要了解代碼的外觀，請看下面的示例。轉換閃爍

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

回答

相關問題