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>