在d3.js中从一个圆圈画一条线到另一个圆圈

Question

我将解释我在实际项目中遇到的问题.我正在使用一个Web服务,这会给我返回点x,y.我正在使用settimeout模拟Web服务.我想在这些坐标中放一个圆圈,对于每个圆圈,我想画一条连接它们的线.像这样:

我想在圆圈之间添加一条线但显示动画.像这样:

http://bl.ocks.org/duopixel/4063326

例如这个动画,但一点一点

当我运行我的应用程序时,我希望该行具有从初始循环到结束的动画.如果我添加一个新的圆圈,我想要创建一条线并为圆圈制作动画.我该怎么做？

http://jsfiddle.net/2rv0o8da/

  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)

Answer 1

回答如何连接点：

要创建连接圆的路径，您只需创建一个使用相同数据的线生成器。

例如，这将创建一个包含 10 个对象的数组，每个对象都有一个x和一个y位置：

var dataSet = d3.range(10).map(function(d) {
    return {x: someValue, y: someValue}
});

因此，由于我们使用这些属性来定位圆，因此我们只需在线条生成器中使用相同的属性：

var lineGenerator = d3.svg.line()
    .x(function(d) {return d.x})
    .y(function(d) {return d.y})
    .interpolate("monotone")

然后，使用您链接的 bl.ocks 中的函数：

var totalLength = path.node().getTotalLength();

path.attr("stroke-dasharray", totalLength + " " + totalLength)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

这是演示：

var dataSet = d3.range(10).map(function(d) {
    return {x: someValue, y: someValue}
});

var lineGenerator = d3.svg.line()
    .x(function(d) {return d.x})
    .y(function(d) {return d.y})
    .interpolate("monotone")