为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

一只斗牛犬 2022-01-13 17:28:15
我希望能够做一些类似于 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();提前致谢
查看完整描述

1 回答

?
牛魔王的故事

TA贡献1830条经验 获得超3个赞

如果我正确理解你想要什么,你所需要的只是两个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....


查看完整回答
反对 回复 2022-01-13
  • 1 回答
  • 0 关注
  • 157 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号