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...。

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

1 个答案: