如何使用 D3.js 动态加载多个线段

Question

我想用D3.js画很多线段。我想创建这样的动画：先绘制一条线段，然后在完成第一条线后绘制第二条线。但是我写的代码只是同时绘制所有的线。下面是线段文件LineOrder.csv。文件中的每一行代表线段的位置。在我的代码中，所有行一起移动，但我希望它们一条一条地出现，就像文件中的顺序一样。

我试过attrTween，但我不知道如何编写一个按顺序连接两点的补间函数。我的问题有什么解决方案吗？提前致谢。

x1,y1,x2,y2
733,110,874,69
74,174,845,384
687,252,605,407
605,245,730,107
601,38,511,208
201,140,435,39
780,230,553,0
741,148,817,297
738,437,379,70

下面是我的D3代码。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>

<script src="http://d3js.org/d3.v3.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


d3.csv("LineOrder.csv", function(error, data) {
  data.forEach(function(d) {
    d.x1 = +d.x1;
    d.y1 = +d.y1;
    d.x2 = +d.x2;
    d.y2 = +d.y2;

  });

// Use transition to draw line
  svg.selectAll("line")
     .data(data)
     .enter()
     .append("line")
     .attr("x1", function(d){return d.x1;})
     .attr("y1", function(d){return d.y1;})
     .attr("x2", function(d){return d.x1;})
     .attr("y2", function(d){return d.y1;})
     .attr("stroke", "blue")
     .attr("stroke-width", 1)
     .transition()
     .duration(5000)
     .attr("x2", function(d){return d.x2;})
     .attr("y2", function(d){return d.y2;});

});

</script>

Answer 1

您可以使用 delay() 调用 transition，然后根据它在数组中的位置延迟每个转换的开始，如下所示：

svg.selectAll("line")
     .data(data)
     .enter()
     .append("line")
     .attr("x1", function(d){return d.x1;})
     .attr("y1", function(d){return d.y1;})
     .attr("x2", function(d){return d.x1;})
     .attr("y2", function(d){return d.y1;})
     .attr("stroke", "blue")
     .attr("stroke-width", 1)
     .transition()
     .duration(5000)
     .delay(function(d, i) { // new delay call.
       return i*5000;
     })
     .attr("x2", function(d){return d.x2;})
     .attr("y2", function(d){return d.y2;});

这里有一个片段可以做到这一点。

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var data = [
    [733,110,874,69],
    [74,174,845,384],
    [687,252,605,407],
    [605,245,730,107],
    [601,38,511,208],
    [201,140,435,39],
    [780,230,553,0],
    [741,148,817,297],
    [738,437,379,70]
  ];

var svg = d3.select("#vis").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


//d3.csv("LineOrder.csv", function(error, data) {
  data.forEach(function(d) {
    d.x1 = +d[0];
    d.y1 = +d[1];
    d.x2 = +d[2];
    d.y2 = +d[3];

  });

// Use transition to draw line
  svg.selectAll("line")
     .data(data)
     .enter()
     .append("line")
     .attr("x1", function(d){return d.x1;})
     .attr("y1", function(d){return d.y1;})
     .attr("x2", function(d){return d.x1;})
     .attr("y2", function(d){return d.y1;})
     .attr("stroke", "blue")
     .attr("stroke-width", 1)
     .transition()
     .duration(5000)
     .delay(function(d, i) {
       return i*5000;
     })
     .attr("x2", function(d){return d.x2;})
     .attr("y2", function(d){return d.y2;});

//});

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

<script src="http://d3js.org/d3.v3.js"></script>
<div id="vis"></div>

如何使用 D3.js 动态加载多个线段

How to dynamically load multiple line segments using D3.js

javascript

animation

line

d3.js