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

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：在 D3 v5.14 中添加了 transition.textTween。如果您使用的是以前的版本，请将其更改为 .tween("text", function() { etc...。

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

How to oscillate and tween between multiple number states?

javascript

d3.js

svg

tween