Question

我正在尝试创建一个跟踪POC的位置，其中将有多个点，并且这些点中的每一个都将连接一个路径。我想先在两点之间绘制一条路径，然后继续前两点。我不想在同一条路径中包含所有点。每个两点应该有一条唯一的路径，因为我想控制每条路径的转换持续时间。

  var ss =  d3.select('#chart')
 .append('svg')
 .attr('width', 760)
 .attr('height', 690)
 .style('background', "#93A1A1")

 //The data for my line
 var lineData = [ { "x": 10,   "y": 5 , "t":7000},  { "x": 200,  "y": 20, "t":8000},
 { "x": 400,  "y": 10, "t":9000}, { "x": 250,  "y": 40, "t":1000},
 { "x": 350,  "y": 200, "t":10000},{ "x": 200,  "y": 500, "t":11000},
 { "x": 120, "y": 80, "t":9000},{ "x": 100,   "y": 500, "t":9000},{ "x": 100,   "y": 50, "t":8000}];

 //Function to draw line
 var lineFunction = d3.svg.line()
 .x(function(d) { return d.x; })
 .y(function(d) {return d.y; })

 var temp = [];

 var time = 0; 
 for(var i = 0; i < lineData.length-1; ++i) {

 temp[0] = lineData[i];
 temp[1] = lineData[i+1];
 time =  lineData[i].t;


 var lineGraph = ss.append("path")
 .attr("d", lineFunction(temp))
 .attr("stroke", "grey")
 .attr("stroke-width", 3)
 .attr("fill", "none");




 var totalLength = lineGraph.node().getTotalLength();

 console.log(totalLength);
 console.log(i+" "+temp[0].x+" "+temp[1].x+" "+time);

 lineGraph 
 .attr("stroke-dasharray", totalLength + " " + totalLength)
 .attr("stroke-dashoffset", totalLength)
 .transition()
 .duration(time)    
 .ease("linear")
 .attr("stroke-dashoffset", 0);
 }

这是我的代码到目前为止，当我运行这个所有的线都被绘制但我需要一个接一个地绘制每个路径。这是演示JSFiddle

Answer 1

使用延迟在前一个动画完成时启动每个后续动画，即

var time = 0;
var totalTime=0;
for (var i = 0; i < lineData.length - 1; ++i) {

    temp[0] = lineData[i];
    temp[1] = lineData[i + 1];
    time = lineData[i].t;

    var lineGraph = ss.append("path")
        .attr("d", lineFunction(temp))
        .attr("stroke", "grey")
        .attr("stroke-width", 3)
        .attr("fill", "none");

    var totalLength = lineGraph.node().getTotalLength();

    console.log(totalLength);
    console.log(i + " " + temp[0].x + " " + temp[1].x + " " + time);

    lineGraph.attr("stroke-dasharray", totalLength + " " + totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
        .delay(totalTime)
        .duration(time)
        .ease("linear")
        .attr("stroke-dashoffset", 0);

    totalTime += time;

}

or as a jsfiddle

一个接一个地绘制D3路径

1 个答案: