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>

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

0 个答案: