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>
添加回答
舉報