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

ご覧のとおり、1 本の線だけが色を設定しています。私は当初、バインディングでいくつかの間違いを犯したと思いましたが、ここと Google グループのいくつかの投稿を確認した後、オブジェクトの不透明度も変更するトランジションがある場合に、このちらつきが通常発生することを発見しました. 残念ながら、不透明度は変更せず、トランジションを行うだけです。この効果は、トランジション (theBars.transition) を実行すると、すべての主要なブラウザーで表示されます。

積み重ねられたバーからバーを選択し、その高さを変更しようとしています。

よろしくお願いします！

4

1 に答える 1

1

これを修正するために、次の 2 つを追加しました。

  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 に答える