第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

延遲到下一個數(shù)據(jù)項,一次又一次地附加

延遲到下一個數(shù)據(jù)項,一次又一次地附加

人到中年有點甜 2021-11-18 16:10:20
我只需要延遲圓圈(一個一個出現(xiàn)),但這delay()被忽略了。  D3_svg.selectAll().data(lst).enter().append("circle")  .attr('cx', d => d.x).attr('cy', d => d.y)  // position  .attr("r", 10).style("fill","red")          // layout  .transition().delay(2000)                   // time to the next有很多復(fù)雜的建議(例子),使用定時器等等,我需要最簡單的。
查看完整描述

1 回答

?
楊__羊羊

TA貢獻1943條經(jīng)驗 獲得超7個贊

雖然可以逐字地按順序附加元素,但有延遲,必要的代碼對于 D3 來說太麻煩了,而且你最終會向后彎腰:在我看來,你想要的只是元素出現(xiàn)在屏幕依次,一個一個。它們可以同時附加。


在這種情況下,我們將使用一個簡單的selection.transition. 但是,我們需要轉(zhuǎn)換一些屬性:不能將不存在轉(zhuǎn)換為存在,這是沒有意義的。


使元素顯示在屏幕中的最簡單方法是轉(zhuǎn)換其不透明度。對于延遲,采用元素索引(第二個參數(shù))的函數(shù)就足夠了。例如,每 1 秒一個元素:


.delay(function (_,i){

    return i * 1000

});

這是一個基本的演示:

d3.select("svg").selectAll(null)

  .data(d3.range(50).map(() => [Math.random() * 300, Math.random() * 150]))

  .enter()

  .append("circle")

  .attr("r", 5)

  .style("fill", "teal")

  .style("stroke", "white")

  .attr("cx", d => d[0])

  .attr("cy", d => d[1])

  .style("opacity", 0)

  .transition()

  .duration(0)

  .delay(function(_, i) {

    return i * 200

  })

  .style("opacity", 1)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<svg></svg>


查看完整回答
反對 回復(fù) 2021-11-18
  • 1 回答
  • 0 關(guān)注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號