Javascript D3一次设置一个路径系列的动画

学习Javascript和D3

尝试创建一个图形，在该图形中，它在一个系列中绘制每一行，一次绘制一行，或在延迟的间隔上绘制一行

到目前为止，我在这篇文章的末尾找到了相关的代码

我的数据是一个结构，每个系列作为一行，有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中的一张图表之外，我还没有找到另一个真正需要研究的例子，这张图表在我的排行榜上有很多名次。

任何帮助或提示都将不胜感激

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;
  }

---

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

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;}

}

---

谢谢，它起作用了。我是对的，你们把它从基准改为数据，以便把每个人的坐标数据放在那个里。然后使用enter和TRANSTION的延迟一次进入每一行？是的，这是正确的。数据可以处理多个点，在输入时创建每条线，并通过转换和延迟绘制每条线。