Javascript 如何使用D3.js动态加载多条线段_Javascript_Animation_D3.js_Line

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

javascript animation d3.js

Javascript 如何使用D3.js动态加载多条线段,javascript,animation,d3.js,line,Javascript,Animation,D3.js,Line,我想使用D3.js绘制许多线段。我想创建这样的动画：先画一条线段，然后在第一条线画完后再画第二条线。但是我写的代码只是同时画出了所有的线。以下是线段文件LineOrder.csv。文件中的每一行表示线段的位置。在我的代码中，所有行一起移动，但我希望它们一个接一个地显示，就像文件中的顺序一样我试过attrTween，但我不知道如何编写一个tween函数来按顺序连接两个点。我的问题有什么解决办法吗？提前谢谢 x1,y1,x2,y2 733,110,874,69 74,174,845,384 687

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

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

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>


身体{
字体：10px无衬线；
}
.线路{
填充：无；
笔画：钢蓝；
笔划宽度：1.5px；
}
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
d3.csv（“LineOrder.csv”，函数（错误，数据）{
data.forEach（函数（d）{
d、 x1=+d.x1；
d、 y1=+d.y1；
d、 x2=+d.x2；
d、 y2=+d.y2；
});
//使用“过渡”来绘制线
svg.selectAll（“行”）
.数据（数据）
.输入（）
.附加（“行”）
.attr（“x1”，函数（d）{返回d.x1；}）
.attr（“y1”，函数（d）{返回d.y1；}）
.attr（“x2”，函数（d）{返回d.x1；}）
.attr（“y2”，函数（d）{返回d.y1；}）
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，1）
.transition（）
.持续时间（5000）
.attr（“x2”，函数（d）{返回d.x2；}）
.attr（“y2”，函数（d）{返回d.y2；}）；
});

您可以使用

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}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
风险值数据=[
[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.选择（#vis”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
//d3.csv（“LineOrder.csv”，函数（错误，数据）{
data.forEach（函数（d）{
d、 x1=+d[0]；
d、 y1=+d[1]；
d、 x2=+d[2]；
d、 y2=+d[3]；
});
//使用“过渡”来绘制线
svg.selectAll（“行”）
.数据（数据）
.输入（）
.附加（“行”）
.attr（“x1”，函数（d）{返回d.x1；}）
.attr（“y1”，函数（d）{返回d.y1；}）
.attr（“x2”，函数（d）{返回d.x1；}）
.attr（“y2”，函数（d）{返回d.y1；}）
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，1）
.transition（）
.持续时间（5000）
.延迟（功能（d，i）{
返回i*5000；
})
.attr（“x2”，函数（d）{返回d.x2；}）
.attr（“y2”，函数（d）{返回d.y2；}）；
//});
.line{
填充：无；
笔画：钢蓝；
笔划宽度：1.5px；
}
是！它确实有用！我以前没想过使用delay（）…谢谢！！