我将解释我在实际项目中遇到的问题。我正在使用一个Web服务,它会返回n个点x、y。我正在使用settimeout来模拟Web服务。我想在这些坐标上放置一个圆,并为每个圆画一条连接它们的线,就像这样:
我想在圆圈之间添加一条线,并显示动画效果,类似于这样:http://bl.ocks.org/duopixel/4063326
比如这个动画,但是要逐点进行
当我运行我的应用程序时,我希望该线条从初始圆圈到终点具有动画效果。如果我添加了一个新的圆圈,我希望创建一条线并对其进行动画处理以连接两个圆圈。我该怎么做呢?
var svg = d3.select('svg');
var dataSet = [10, 20, 30, 40];
function display(data){
var circle = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr({
r:function(d){ return d },
cx:function(d, i){ return i * 100 + 50 },
cy:50,
fill: 'red'
});
}
display(dataSet);
setTimeout(function(){
display([5]);
},2000)