[英]D3 line transition starting at incorrect point
I am working on my first d3 project and running into a seemingly simply issue. 我正在做我的第一个d3项目,并且遇到了一个看似简单的问题。
I have tried to transition a line from point x1, y1 to x2, y2. 我试图将一条线从点x1,y1过渡到x2,y2。 I would like to animate it to start at the first point and draw itself out to the second point. 我想对其进行动画处理,使其从第一点开始,然后吸引自己到第二点。
The issue is that when my transition starts, it creates a line connecting x1, y1 to the top left corner of the window and then swings the whole line to connect to x2, y2. 问题是,当我的过渡开始时,它将创建一条将x1,y1连接到窗口左上角的线,然后摆动整条线以连接到x2,y2。
If anyone could assist me in correcting the transition, that would be greatly appreciated!! 如果有人可以帮助我纠正过渡问题,将不胜感激!
// adding the line
var lines = svg.selectAll("line")
.data(dataset)
.enter()
.append("svg:line")
// line attributes
lines.attr(
"x1", start_x)
.attr("y1", start_y)
.attr("x2", end_x)
.attr("y2", end_y)
.transition()
.duration(600)
If you want the lines to stretch out to their final destination then you need to set both ends of the line (x1/y1, x2/y2) to the same location before transitioning. 如果希望线延伸到其最终目的地,则需要在转换之前将线的两端(x1 / y1,x2 / y2)设置在相同位置。
lines.attr(
"x1", start_x)
.attr("y1", start_y)
.attr("x2", start_x)
.attr("y2", start_y)
.transition()
.duration(600)
.attr("x2", end_x)
.attr("y2", end_y)
Example : http://jsbin.com/akAZEjIW/1/edit 示例: http : //jsbin.com/akAZEjIW/1/edit
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.