Question

我正在研究我的第一个d3项目并遇到一个看似简单的问题。

我试图将一条线从点x1，y1过渡到x2，y2。我想动画它从第一点开始，并将自己绘制到第二点。

问题在于，当我的转换开始时，它会创建一条连接x1，y1到窗口左上角的线，然后摆动整条线以连接到x2，y2。

如果有人可以协助我纠正过渡，那将非常感激!!

// 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)

Answer 1

如果您希望线条延伸到最终目的地，则需要在转换前将线条的两端（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)

示例：http://jsbin.com/akAZEjIW/1/edit

D3线转换从错误的点开始

1 个答案: