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