添加轉換到d3j散點圖

Question

我是d3j的新手，並且正在玩轉換。我希望數據點在頁面上逐一顯示。我如何實現這一目標？我試着插入：

.transition() 
.delay(1000) 

在不同的點在本節：

var data=[]; 
for (var i=0;i<10;i++) 
    data.push([Math.floor(Math.random()*30),Math.floor(Math.random()*30)]); 

var svg=d3.select("body") 
.append("svg") 
.attr("width",w) 
.attr("height",h); 

svg.selectAll("circle") 
.data(data) 
.enter() 
.append("circle") 
.attr("cx",function(d){return xscale(d[0]);}) 
.attr("cy",function(d){return yscale(d[1]);}) 
.attr("r",function(d){return rscale(d[1]);}) 
.attr("fill","teal") 
; 

感謝您的幫助。

Answer 1

.transition()將動態轉換樣式或屬性。如果您希望您的積分以延遲方式出現，則可以將r屬性從0（有效不可見）轉換爲新值。在你的代碼看起來像：

svg.selectAll("circle") 
.data(data) 
.enter() 
.append("circle") 
.attr("cx",function(d){return xscale(d[0]);}) 
.attr("cy",function(d){return yscale(d[1]);}) 
.attr("r", 0) 
.attr("fill","teal") 
.transition() 
.delay(1000) 
.attr("r",function(d){return rscale(d[1]);}) 
; 

另一種方法是要從其過渡的不透明度爲0〜1：

svg.selectAll("circle") 
.data(data) 
.enter() 
.append("circle") 
.attr("cx",function(d){return xscale(d[0]);}) 
.attr("cy",function(d){return yscale(d[1]);}) 
.attr("r",function(d){return rscale(d[1]);}) 
.attr("fill","teal") 
.style("opacity", 0) 
.transition() 
.delay(1000) 
.style("opacity", 1) 
; 

這兩項都會有同樣的效果與.delay()但會另眼相看與.duration()因爲風格/屬性是從一個值到另一個值的補間。

添加作爲澄清的評價結果​​：

錯開節點的外觀，所述.delay（）值系在元件的陣列位置：

svg.selectAll("circle") 
.data(data) 
.enter() 
.append("circle") 
.attr("cx",function(d){return xscale(d[0]);}) 
.attr("cy",function(d){return yscale(d[1]);}) 
.attr("r",function(d){return rscale(d[1]);}) 
.attr("fill","teal") 
.style("opacity", 0) 
.transition() 
.delay(function(d,i) {return i * 100) 
.style("opacity", 1) 
;