Question

我正在尝试使用d3.js v3复制d3.js v4中编写的示例in this link，因为我的应用程序已经过时，我无法更改库。但是当我尝试使用较旧的versiob运行它时，我收到以下错误：

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

Another post这里提到了同样的问题，但遗憾的是它没有解释如何用v3复制这个例子。虽然我确实知道问题是transition.on（）是v4的新手。

有人可以帮我把这个例子移回v3。

＆＃13;

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);
  });

＆＃13;

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

＆＃13;

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

＆＃13;

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>

d3js文本转换我的示例与v3库

1 个答案: