[英]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.