找到你要的答案

Q:How to dynamically load multiple line segments using D3.js

Q:如何动态加载多个线段d3.js

I want to draw many line segments using D3.js. I would like to create animations like this: draw one line segment first, and then draw the second line after the fist line is done. But the codes I wrote just draw all the lines at the same time. The below is the line segments file LineOrder.csv. Every line in the file represents the locations of the line segment. In my codes, all the line move together but I want them appear one by one, just as the order in the file.

I have tried attrTween, but I don't know how to write a tween function for connecting two points in order. Is there any solutions to my problem? Thanks in advance.

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

The below is my D3 codes.

<!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画多线段。我想创建这样的动画:首先画一个线段,然后画完第二行后的第二行。但是我写的代码同时画出所有的线。以下是线段文件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

以下是我的D码。

<!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>
answer1: 回答1:

You can use the delay() call to the transition and then just delay the start of each transition based on it's position in the array, like so:

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

Here's a snippet that does exactly that.

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>

你可以使用delay()叫过渡就延迟基于其在数组中的位置的每一个过渡的开始,像这样:

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>
javascript  animation  d3.js  line