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>