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

}

D3一次对一个路径进行动画处理

1 个答案: