如何在多个数字状态之间振荡和补间？

Question

我希望能够做一些类似于 Mike Bostock 在 .textTween 文档中的第二个示例中所做的事情。为了解决这个问题，我做了很多工作，但我不能完全正确。我对 JavaScript 完全陌生，所以也许这就是问题所在。在observable notebook的情况下，数字在不同的随机变量之间振荡，这些随机变量被分配给下一次振荡的 _current 参数。我将如何只用两个数字来做到这一点，我想在这两个数字之间来回切换？我尝试将其处理成这样的代码，但无济于事-var svg = d3.select("body")        .append("svg")        .attr("width", 960)        .attr("height", 500);function textrepeat() {    var textrepeat = svg.append("text")        .attr("fill", "steelblue")        .attr("class", "txt")        .attr("x", 30)        .attr("y", 30)    repeat();    function repeat() {      textrepeat        .text("300")              .transition()                .duration(2000)        .tweening ???   //here is where to insert it?        .text("1000")            .transition()                .duration(2000)              .text("300")            .on("end", repeat);      };};textrepeat();提前致谢

Answer 1

如果我正确理解你想要什么，你所需要的只是两个textTween功能。例如，300往返1000：

var svg = d3.select("body")

  .append("svg");

function textrepeat() {

  var textrepeat = svg.append("text")

    .attr("fill", "steelblue")

    .attr("x", 30)

    .attr("y", 50);

  repeat();

  function repeat() {

    textrepeat.transition()

      .duration(2000)

      .textTween(function() {

        return function(t) {

          return ~~d3.interpolate(300, 1001)(t)

        };

      })

      .transition()

      .duration(2000)

      .textTween(function() {

        return function(t) {

          return ~~d3.interpolate(1001, 300)(t)

        };

      })

      .on("end", repeat);

  };

};

textrepeat();

text {

  font-size: 46px;

  font-weight: 700;

}

<script src="https://d3js.org/d3.v5.min.js"></script>

PS：transition.textTween在 D3 v5.14 中添加。如果您使用的是以前的版本，请将其更改为.tween("text", function() { etc....