javascript - D3 一次为一个路径系列制作动画

Question

学习 Javascript 和 D3。

尝试创建一个图表，在其中绘制一系列中的每条线，一次一条或延迟间隔。

到目前为止我得到了什么(本文末尾的相关代码)

https://jsfiddle.net/jimdholland/5n6xrLk0/180/

我的数据是一个结构，每个系列为一行，有 12 列。当你读入它时，对象大致看起来像

mydata = [
{NumDays01: "0", NumDays02: "0", NumDays03: "0", NumDays04: "0", NumDays05: "0",Numdays06: 30}
1: {NumDays01: "0", NumDays02: "0", NumDays03: "0", NumDays04: "0",...
]

我可以让它创建线，但它一次绘制所有路径。同样，我试过一个循环，但仍然一次绘制它们。还尝试了 d3.timer 和类似的结果。但我很难理解计时器回调的内容并正确创建这些函数。

除了来自 FlowingData 的图表之外，我还没有找到另一个可以真正研究的例子，它在我的联盟中有很多花里胡哨的东西。 https://flowingdata.com/2019/02/01/how-many-kids-we-have-and-when-we-have-them/

如有任何帮助或提示，我们将不胜感激。

var svg = d3.select("#chart").select("svg"),
    margin = { top: 30, right: 20, bottom: 10, left: 40 },
    width = parseInt(d3.select("#chart").style('width'), 10) - margin.left - margin.right;

d3.tsv("https://s3.us-east-2.amazonaws.com/jamesdhollandwebfiles/data/improvementTest.tsv", function(error, data) {
        if (error) throw error;

    console.log(data);
        myData = data;

    var t = d3.timer(pathMaker);


}); // @end d3.tsv()


function pathMaker() {

    var peeps = myData[rowToRun];

  var coords = [];
  var lineToRemove = [];

  for (var nameIter in dayList) {
    coords.push({ x: x(nameIter), y: y(peeps[dayList[nameIter]])})

  }

var improvementPath = g.append("path")
    .datum(coords)
  .attr("id", "path" + peeps.caseid)
  .attr("d", lineMaker)
  .attr("stroke", "#90c6e4")
  .attr("fill", "none")
  .attr("stroke-width", 2);

  var total_length = improvementPath.node().getTotalLength();
  var startPoint = pathStartPoint(improvementPath);

  improvementPath = improvementPath
    .attr("stroke-dasharray", total_length + " " + total_length)
    .attr("stroke-dashoffset", total_length)
    .transition() // Call Transition Method
    .duration(4000) // Set Duration timing (ms)
    .ease(d3.easeLinear) // Set Easing option
    .attr("stroke-dashoffset", 0); // Set final value of dash-offset for transition

    rowToRun += 1;
    if (rowToRun == 5) {rowToRun = 0;}

}


 //Get path start point for placing marker
  function pathStartPoint(Mypath) {
    var d = Mypath.attr("d"),
    dsplitted = d.split(/M|L/)[1];
    return dsplitted;
  }

Answer 1

有几个问题。我尝试尽可能少地配置您的代码以使其正常工作。如果您需要进一步的解释，请告诉我

d3.tsv("https://s3.us-east-2.amazonaws.com/jamesdhollandwebfiles/data/improvementTest.tsv", function(error, data) {
  if (error) throw error;

  console.log(data);
  myData = data;

  pathMaker()


}); // @end d3.tsv()


function pathMaker() {

  var peeps = myData[rowToRun];

  var coords_data = [];
  var lineToRemove = [];

  for (let i = 0; i < myData.length; i++) {
    var coords = [];
    for (var nameIter in dayList) {
      coords.push({ x: x(nameIter), y: y(myData[i][dayList[nameIter]])})
    }
    coords_data.push(coords)
  }
  console.log(coords_data)

  var improvementPath = g.selectAll("path")
    .data(coords_data)
    .enter()
    .append("path")
    .attr("d", lineMaker)
    .attr("stroke", "#90c6e4")
    .attr("fill", "none")
    .attr("stroke-width", 2);


  improvementPath = improvementPath.each(function (d,i) {
    var total_length = this.getTotalLength();
    var startPoint = pathStartPoint(improvementPath);
    const path = d3.select(this)
      .attr("stroke-dasharray", total_length + " " + total_length)
      .attr("stroke-dashoffset", total_length)
      .transition() // Call Transition Method
      .duration(4000) // Set Duration timing (ms)
      .delay(i*4000)
      .ease(d3.easeLinear) // Set Easing option
      .attr("stroke-dashoffset", 0); // Set final value of dash-offset for transition
  })

  rowToRun += 1;
  if (rowToRun == 5) {rowToRun = 0;}

}