0

私は最初の d3 プロジェクトに取り組んでおり、一見単純な問題に直面しています。

ポイント x1、y1 から x2、y2 に線を移行しようとしました。最初のポイントから開始し、2 番目のポイントまで引き延ばすようにアニメーション化したいと思います。

問題は、トランジションが開始されると、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 に答える