Haga varias líneas con animación desde la última posición hasta las nuevas posiciones.

En mi problema real, estoy consumiendo un servicio web que devuelve una matriz con puntos en x e y. Esta es la estructura de la matriz que puedo recibir.

  var dataSet=[
    [
      { "voltaje":  10, "corriente": Math.random() * 130 + 10},
      { "voltaje":  40, "corriente": Math.random() * 130 + 10},
      { "voltaje": 70, "corriente": Math.random() * 130 + 10}
    ],
     [
      { "voltaje": 100, "corriente": Math.random() * 130 + 10},
      { "voltaje":  130, "corriente": Math.random() * 130 + 10},
      { "voltaje":  160, "corriente": Math.random() * 130 + 10},
      { "voltaje":  190, "corriente": Math.random() * 130 + 10}
    ]
  ];

Actualmente tengo este código que funciona para una estructura como esta:

var dataset=  [{
  x: d * 30 + 10,
  y: Math.random() * 130 + 10
},
{
  x: d * 30 + 10,
  y: Math.random() * 130 + 10
}
]

y en este código obtengo lo que quiero. Algunas líneas están pintadas con una animación. y se simula como si el servicio web devolviera algunos puntos, luego se agregan estos nuevos puntos y la animación de la línea continúa desde el último punto hasta el nuevo punto.

Quiero tener los puntos y la animación de cada matriz por separado, por ejemplo:

Me gustaría adaptar mi nueva estructura a este código y separarlo en varias líneas, pero no he podido hacerlo. ¿Cómo puedo hacerlo?

http://jsfiddle.net/3ok8uuj3/

  var svg = d3.select('svg');

  var backLayer = svg.append("g");
  var frontLayer = svg.append("g");

  var dataSet = d3.range(10).map(function(d) {
    return {
      x: d * 30 + 10,
      y: Math.random() * 130 + 10
    }
  });

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

  function displayLine(data) {
    var line = backLayer.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);
  }

  displayLine(dataSet)

  setTimeout(function() {
   setInterval(function() {
   var newData = { x: (dataSet.length) * 30 + 10, y: Math.random() * 130 + 10 };
   displayLine([dataSet[dataSet.length - 1], newData]);
   dataSet.push(newData);
  }, 2000);
  }, 2000);

Respuestas a la pregunta(3)

Su respuesta a la pregunta