Untitled

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.min.js"></script>
<script>


var lines = [
  {"x1": 20, "y1": 0, "x2": 20, "y2":20,  "stroke": "blue", "stroke-width": 6},
  {"x1": 20, "y1": 5, "x2":15, "y2": 10,  "stroke": "blue", "stroke-width": 6},
  {"x1": 20, "y1": 5, "x2":25, "y2": 10, "stroke": "blue", "stroke-width": 6}];


 var svg = d3.select("body").append("svg")
                                     .attr("width", 1000)
                                     .attr("height", 1000);

var airplane = svg.selectAll("line")
                .data(lines)
                .enter().append("line");


var airplaneAttr = airplane
      .attr("x1", function (d) { return d.x1; })
      .attr("y1", function (d) { return d.y1; })
      .attr("x2", function (d) { return d.x2; })
      .attr("y2", function (d) { return d.y2; })
      .attr("stroke-width", 2 )
      .attr("stroke" , "blue" );


function moveAirplane(){
  for(i=0; i<30; i++){
    var x = Math.random()*1000;
    var y = Math.random()*1000;
    airplane
      .attr("x1", function (d) { return d.x1 +x; })
      .attr("y1", function (d) { return d.y1 +y; })
      .attr("x2", function (d) { return d.x2 +x; })
      .attr("y2", function (d) { return d.y2 +y; });
    }
}

var nodes = d3.range(20).map(moveAirplane());


</script>