我發現我工作的解決方案。我覺得它仍然是難看的代碼,但至少它是有效的。
首先我創建一個unvisible對象在我的數據集的每個數據:
g.data(dat)
.enter()
.append("circle")
.attr("class", function(d,i) { return "default " + d.pn; })
.attr("cx", function(d,i) { return d.x1; })
.attr("cy", function(d,i) { return d.y1; })
.attr("r", function(d,i) { return d.r; })
.style("opacity", 0);
然後我去shedule每個單一元素的過渡:
g.each(function(d,i){
var delay = Math.floor((i+1)/nrOfElements);
//console.log(delay);
d3.select(this)
.transition()
.delay(delay * speed)
.duration(speed + DELAY_OFFSET)
.style("opacity", 100)
.attr("cx", function(d) { return i<dat.length-1 ? dat[i+1].x1 : dat[i].x1; })
.attr("cy", function(d) { return i<dat.length-1 ? dat[i+1].y1 : dat[i].y1; })
.attr("r", function(d) { return i<dat.length-1 ? dat[i+1].r : dat[i].r; })
.style("stroke", "blue") // TODO: setAttributes
.each("end", function() {
// Reset to privious attributes
d3.select(this)
.attr("cx", function(d) { return dat[i].x1; })
.attr("cy", function(d) { return dat[i].y1; })
.attr("r", function(d) { return dat[i].r; })
;
if(i<dat.length-nrOfElements) d3.select(this).style("opacity", 0);
})
;
});
這似乎是一個巨大的努力在編碼給我一個相當簡單的要求...但至少它工作..
更好的解決方案仍然歡迎!
來源
2013-01-06 09:50:24
KIC
但是如果你這樣做,最後的轉換將覆蓋所有的私人一次,所以只有一個動畫可見。 – KIC