Make multiple line with animation from the last position to the new positions

Question

In my real problem I\'m consuming a web service that returns an array with points in x and y. this is the structure of the array that I can receive.

  var dataSe         


        

Answer 1

maybe this, you must simple it i make it not simple cos i want you understand, it can make with single svg if you know the min max value of axis, but i doing on 3 svg i hope you can learn and make it what you want

var dataSet=[
    [
      { "voltaje":  10, "corriente": Math.random() * 130 + 10},
      { "voltaje":  40, "corriente": Math.random() * 130 + 10}
    ],
         [
      { "voltaje":  10, "corriente": Math.random() * 130 + 10},
      { "voltaje":  40, "corriente": Math.random() * 130 + 10},
      { "voltaje": 50, "corriente": 30}
    ],
            [
      { "voltaje":  10, "corriente": Math.random() * 130 + 10}
    ],
  ];
  
  dataSet.forEach(function(d,i){
     var svg = d3.select('#dataset'+(i+1));
      var backLayer = svg.append("g").attr('id','back'+i);
      var frontLayer = svg.append("g").attr('id','front'+i);
  })
  var dataSet1=[]
  var dataSet2=[]
  var dataSet3=[]
  console.log(dataSet[1][1])
  /*
      var dataSet = d3.range(1).map(function(d) {
        return {
          x: d * 30 + 10,
          y: Math.random() * 130 + 10
        }
      });
*/


      function displayLine(data,svg,i) {
      
      var lineGenerator = d3.svg.line()
        .x(function(d) {
          return d.voltaje
        })
        .y(function(d) {
          return d.corriente
        })
        .interpolate("monotone")
        var line = d3.select('#back'+i).selectAll(null)
          .data(data)
          .enter()
          .append("path")
          .attr({
            d: lineGenerator(data),
            fill: 'none',
            stroke: "red",
            "stroke-width": "3px"
          });

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

        line.attr("stroke-dasharray", totalLength + " " + totalLength)
          .attr("stroke-dashoffset", totalLength)
          .transition()
          .duration(2000)
          .ease("linear")
          .attr("stroke-dashoffset", 0);
      }
      
      
    dataSet.forEach(function(d,i){
      if (i==0){
      var data = dataSet1
      
      }else if(i==1){
      var data = dataSet2
      }else{
      var data = dataSet3
      }
       var svg = d3.select('#dataset'+(i+1));
    	data.push(dataSet[i])
      displayLine(dataSet[i],svg,i)
    })
	
var i1=(-1)
var i2=(-1)
var i3=(-1)
var t = 1
      setTimeout(function() {
 
       setInterval(function() {
       t++
   		dataSet.forEach(function(d,i){
    var newData = [{ 'voltaje': 10 + 50*t + 100, 'corriente': Math.random() * 130 + 10*1 }]
    	if (i==0){
      i1++
      var data = dataSet1
       newData.unshift(data[i1][data[i1].length - 1])
       console.log(i,data[i])
      }else if(i==1){
      i2++
      var data = dataSet2
       newData.unshift(data[i2][data[i2].length - 1])
       console.log(i,data[i])
      }else{
      i3++
      var data = dataSet3
       newData.unshift(data[i3][data[i3].length - 1])
       console.log(i,data[i])
      }
     
      
      var svg = d3.select('#dataset'+(i+1));
       displayLine(newData,svg,i);
       data.push(newData);
      })

      }, 2000);
 
      }, 2000);

* {
  margin: 0;
  padding: 0;
  border: 0;
}
svg{
display:block;
}
body {
  background: #ffd;
}