[英]What is the correct way of chaining transitions in d3?
受到另一個問題的啟發,我創建了一個動畫( jsfiddle ),該動畫繪制了一個圓,然后繪制了一條將其連接到另一個圓的線。 我讀到D3 v3不需要監聽end
事件到鏈轉換。
下面的代碼有效,但如何重構它而不使用end
事件?
var margin = {top: 40, bottom: 40, left: 40, right: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.bottom - margin.top;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var t0 = svg.append("circle")
.attr("r", 0)
.attr("cx", 40)
.attr("cy", 40)
.attr("class", "point")
.transition()
.duration(500)
.attr("r", 4);
var t1 = t0.each("end", function(){
var t2 = svg.append("path")
.style("stroke", "#000")
.style("stroke-width", 2)
.style("fill", "none")
.attr("d", "M40,40L40,40")
.transition()
.ease("linear")
.duration(500)
.attr("d", "M40,40L80,80");
t2.each("end", function(){
svg.append("circle")
.attr("r", 1)
.attr("cx", 80)
.attr("cy", 80)
.attr("class", "point")
.transition()
.duration(500)
.attr("r", 4);
});
});
好的,感謝評論,我意識到我可以做到這一點:
t0 = svg.transition()
創建第一個過渡, t0
結束后觸發) t1 = t0.transition()
t2 = t1.transition()
請注意,如果要更改每個過渡的持續時間,則必須在定義過渡時進行。 這是錯誤的:
var t1 = t0.transition()
.ease("linear");
t1.select("path.line")
.duration(500)
.attr("d", "M40,40L80,80");
它應該是:
var t1 = t0.transition()
.ease("linear");
.duration(500)
t1.select("path.line")
.attr("d", "M40,40L80,80");
這是最終代碼( jsfiddle ):
var margin = {top: 40, bottom: 40, left: 40, right: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.bottom - margin.top;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("circle")
.attr("r", 0)
.attr("cx", 40)
.attr("cy", 40)
.attr("class", "point-start")
svg.append("path")
.style("stroke", "#000")
.style("stroke-width", 2)
.style("fill", "none")
.attr("class", "line")
.attr("d", "M40,40L40,40");
svg.append("circle")
.attr("r", 0)
.attr("cx", 80)
.attr("cy", 80)
.attr("class", "point-end")
var t0 = svg.transition()
.duration(100);
t0.select("circle.point-start")
.attr("r", 4);
var t1 = t0.transition()
.duration(500)
.ease("linear");
t1.select("path.line")
.attr("d", "M40,40L80,80");
var t2 = t1.transition()
.duration(100);
t2.select("circle.point-end")
.attr("r", 4);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.