D3.js d3更新编号-向上/向下计数，而不是立即更换编号

嘿嘿,， 当用户按下按钮时，我正在更新条形图。这在

.transition

-属性中运行良好。但是，如果我在文本上这样做，它会立即替换文本。相反，我希望发生的是，它将从旧的数字计数到新的数字（当标签随着条移动时）。例如：一个条从值1453更新为1102。在指定的转换时间内，它应该从1102计数到1453，而不是在用户单击时立即替换1453。

---

我能做到吗？有d3函数吗？

我上传了一个文本插值的快速示例。有关部分包括：

并使用：

在我的例子中，我正在听一个拖动开始/结束，但是你可以很容易地把它连接到一个按钮上

上述代码之所以有效，是因为

.tween

将获得与标准插值器相同的动画“滴答声”。这将导致内部

t

参数与动画的进度相匹配，当您设置

This.textContent

时，它将更新DOM元素的内部值

我使用的示例是在两个点之间进行插值，这非常简单，但是如果您只想更新只包含一个数字的文本，那么就更容易了

function interpolateText(a, b) {
  var regex = /^(\d+), (\d+)$/;
  var matchA = regex.exec(a);
  var matchB = regex.exec(b);

  if (matchA && matchB) {
    var x = d3.interpolateRound(+matchA[1], +matchB[1]);
    var y = d3.interpolateRound(+matchA[2], +matchB[2]);
    return function(t) {
      var result = [x(t), y(t)].join(", ");
      return result;
    };
  }
}

d3.interpolators.push(interpolateText);

  .on("dragend", function(d, i) {
    var prev = [d.x, d.y].join(", ");

    d.x = d.origin[0];
    d.y = d.origin[1];

    var next = [d.x, d.y].join(", ");

    var selection = d3.select(this)
      .transition()
      .duration(1000)
      .call(draw);

    selection
      .select("text")
      .tween("textTween", function() {
        var i = d3.interpolate(prev, next);
        return function(t) {
          this.textContent = i(t);
        }
      });
  });