d3jsテキスト移行v3ライブラリの例

Question

私のアプリケーションが古いのでライブラリを変更できないので、d3.js v3でd3.js v3で書かれた例in this linkを複製しようとしています。私は古いversiobでそれを実行しようとする。しかし、私は次のエラーを取得する：

ここ

d3.select(...).transition(...).duration(...).on is not a function 

Another postは非常に同じ問題に言及したが、悲しいことに、それはV3でこの例を複製する方法については説明しません。問題はtransition.on（）がv4の新機能だということを知りましたが。

この例をv3に移植するのを手伝ってください。

var format = d3.format(",d"); 
 

 
d3.select("h1") 
 
    .transition() 
 
    .duration(2500) 
 
    .each("start", function repeat() { 
 
    d3.active(this) 
 
     .tween("text", function() { 
 
     var that = d3.select(this), 
 
      i = d3.interpolateNumber(that.text().replace(/,/g, ""), Math.random() * 1e6); 
 
     return function(t) { 
 
      that.text(format(i(t))); 
 
     }; 
 
     }) 
 
     .transition() 
 
     .delay(1500) 
 
     .each("start", repeat); 
 
    });

h1 { 
 
    font: 400 120px/500px "Helvetica Neue"; 
 
    text-align: center; 
 
    width: 500px; 
 
    height: 500px; 
 
    margin: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js"></script> 
 
<h1>0</h1>

Answer 1

これはD3のバージョン3の数を移行の最小例です。書式設定や初期番号への再変換などの機能を追加するには、この例のhereをご覧ください。

d3.selectAll("h1").transition().duration(1500).delay(0) 
 
    .tween("text", function(d) { 
 
     var i = d3.interpolate(0, 4000); 
 
     return function(t) { 
 
     d3.select(this).text((i(t))); 
 
     }; 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js"></script> 
 
<h1>0</h1>