亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在多個數字狀態之間振蕩和補間?

如何在多個數字狀態之間振蕩和補間?

一只斗牛犬 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 關注
  • 184 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號