javascript - d3js 文本转换 I 使用 v3 库的示例

Question

我正在尝试复制示例 in this link使用 d3.js v4 和 d3.js v3 编写，因为我的应用程序很旧并且无法更改库。但是当我尝试使用旧版本运行它时，出现以下错误:

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>