title: draw a line from one circle to another in d3.js
body: <p>I will explain the problem that I have in my real project. I am consuming a web service and this returns me n points x, y. I'm simulating the web service with a settimeout. I want to put a circle in those coordinates and for each circle I want to draw a line that connects them. like this:</p>
  
  <p><a href="https://i.stack.imgur.com/4ziN2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4ziN2.jpg" alt="enter image description here"></a></p>
  
  <p>I would like to add a line between the circles but showing an animation. like this:</p>
  
  <p><a href="http://bl.ocks.org/duopixel/4063326" rel="nofollow noreferrer">http://bl.ocks.org/duopixel/4063326</a></p>
  
  <p>for example this animation, but point by point</p>
  
  <p>when I run my application I want the line to have an animation from the initial circle to the end. and if I add a new circle I want a line to be created and have an animation to the circle. How can I do it?</p>
  
  <p><a href="http://jsfiddle.net/2rv0o8da/" rel="nofollow noreferrer">http://jsfiddle.net/2rv0o8da/</a></p>
  
  <pre><code>  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)
  </code></pre>