如何使用d3在多个数字状态之间振荡和补间

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();
提前感谢

我希望能够像Mike Bostock在.textTween文档中的第二个示例中所做的那样类似。我已经为解决这个问题做了很多工作，但是我不能...

Answer 1

如果我正确理解您想要的，您只需要两个textTween功能。例如，从300到1000然后返回：