0

我正在处理我的第一个 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)
4

1 回答 1

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

于 2013-10-17T14:51:46.063 回答