d3アップデート番号 - すぐに番号を交換する代わりにカウントアップ/ダウン

Question

Hei、 ユーザーがボタンを押したときに棒グラフを更新しています。それは.transition - プロパティで正常に動作します。しかし、私がテキスト上でそれを行うと、テキストが直ちに置き換えられます。代わりに私は起こることを望んでいるのは、それが古いものから新しいものまで（ラベルがバーと共に動いている間に）数えられるということです。例えば、バーは値1453から1102に更新されます。ユーザがクリックすると直ちに1453を置き換える代わりに、指定された遷移時間にわたって1102から1453までカウントアップする必要があります。 これを達成できますか？そのためのd3関数はありますか？

Answer 1

bl.ocksにテキスト補間の簡単な例をアップロードしました。関連部品custom interpolatorです：

function interpolateText(a, b) { 
    var regex = /^(\d+), (\d+)$/; 
    var matchA = regex.exec(a); 
    var matchB = regex.exec(b); 

    if (matchA && matchB) { 
    var x = d3.interpolateRound(+matchA[1], +matchB[1]); 
    var y = d3.interpolateRound(+matchA[2], +matchB[2]); 
    return function(t) { 
     var result = [x(t), y(t)].join(", "); 
     return result; 
    }; 
    } 
} 

d3.interpolators.push(interpolateText); 

そしてd3.transition.tweenを使用して：私の場合は

.on("dragend", function(d, i) { 
    var prev = [d.x, d.y].join(", "); 

    d.x = d.origin[0]; 
    d.y = d.origin[1]; 

    var next = [d.x, d.y].join(", "); 

    var selection = d3.select(this) 
     .transition() 
     .duration(1000) 
     .call(draw); 

    selection 
     .select("text") 
     .tween("textTween", function() { 
     var i = d3.interpolate(prev, next); 
     return function(t) { 
      this.textContent = i(t); 
     } 
     }); 
    }); 

、私はドラッグ開始/終了を待機していますが、あなたは非常に簡単にボタンの押しにそれをフックすることができます。

.tweenは、標準のインターポレータが使用するのと同じアニメーション「ティック」を得るためです。これにより、内部のtパラメータがアニメーションの進行状況と一致し、this.textContentを設定すると、DOM要素の内部値が更新されます。

私が使用する例では、2つの点の間を補間していますが、これはかなり簡単ですが、正確に1つの数値を含むテキストを更新するだけであれば、さらに簡単です。