D3トランジションで徐々にsvgテキストとして表示される番号を変更

Question

d3でsvgテキストとして表示される数値の値を徐々に変更する簡単な方法を探しています。

var quality = [0.06, 14]; 
// qSVG is just the main svg element 

qSVG.selectAll(".txt") 
    .data(quality) 
    .enter() 
    .append("text") 
    .attr("class", "txt") 
    .text(0) 
    .transition() 
    .duration(1750) 
     .text(function(d){ 
      return d; 
     }); 

この場合のテキストは数値なので、移行の最後まで簡単に増やすことができます。

多分あなたの誰かがアイデアを持っています。それはすでにd3JSを思わ

乾杯

Answer 1

はここ

は、コード例の重要な部分である「トゥイーン」と呼ばれる、適切な機能を提供します。

.tween("text", function(d) { 
     var i = d3.interpolate(this.textContent, d), 
      prec = (d + "").split("."), 
      round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1; 

     return function(t) { 
      this.textContent = Math.round(i(t) * round)/round; 
     }; 
    });​ 

http://jsfiddle.net/c5YVX/280/

あなたは、任意の開始から任意の終了値に与えられた時間間隔に関係なく、その数精度の上にそれらをインクリメントすることができます。

SVGテキスト用に実装されていますが、もちろん標準のhtmlテキストでも同じです。

丸い数字のプレーントゥイーン関数のみが必要な場合は、ちょっとだけleightweightを取得します。

.tween("text", function(d) { 
     var i = d3.interpolate(this.textContent, d), 

     return function(t) { 
      this.textContent = Math.round(i(t)); 
     }; 
    });​