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

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")&nbsp; .append("svg");function textrepeat() {&nbsp; var textrepeat = svg.append("text")&nbsp; &nbsp; .attr("fill", "steelblue")&nbsp; &nbsp; .attr("x", 30)&nbsp; &nbsp; .attr("y", 50);&nbsp; repeat();&nbsp; function repeat() {&nbsp; &nbsp; textrepeat.transition()&nbsp; &nbsp; &nbsp; .duration(2000)&nbsp; &nbsp; &nbsp; .textTween(function() {&nbsp; &nbsp; &nbsp; &nbsp; return function(t) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return ~~d3.interpolate(300, 1001)(t)&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .transition()&nbsp; &nbsp; &nbsp; .duration(2000)&nbsp; &nbsp; &nbsp; .textTween(function() {&nbsp; &nbsp; &nbsp; &nbsp; return function(t) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return ~~d3.interpolate(1001, 300)(t)&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .on("end", repeat);&nbsp; };};textrepeat();text {&nbsp; font-size: 46px;&nbsp; font-weight: 700;}<script src="https://d3js.org/d3.v5.min.js"></script>PS：transition.textTween在 D3 v5.14 中添加。如果您使用的是以前的版本，请将其更改为.tween("text", function() { etc....