Javascript 使用动画从最后一个位置到新位置绘制多行

在我真正的问题中，我使用的是一个web服务，它返回一个在x和y上有点的数组。这是我可以接收的阵列的结构

  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}
    ]
  ];

我目前有这样的代码，适用于这样的结构：

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

在这段代码中，我得到了我想要的。有些线条是用动画绘制的。它被模拟为web服务返回一些点，然后添加这些新点，线条的动画从最后一点继续到新点

我想分别设置每个阵列的点和动画，例如：

我想使我的新结构适应这段代码，并将其分成多行，但我一直无法做到。我怎么做

---

首先，在没有数据的示例中，数据是

dataSet = [{x,y},{x,y}]
newData =  [last x and y, new data]

你想换成

  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}
    ]
  ];

newData =  [last voltaje and corriente, new data]

创建新的数据保持器，如

dataSet1

，

将所有新变量推送到那里，当重画将参数设置为指向数据时，您可以使用索引，然后绘制它


var svg=d3.select（'svg'）；
var backLayer=svg.append（“g”）；
var frontLayer=svg.append（“g”）；
变量数据集=[
[
{“voltaje”：10，“corriente”：Math.random（）*130+10}，
{“voltaje”：40，“corriente”：Math.random（）*130+10}，
{“voltaje”：70，“corriente”：30}
],
[
{“voltaje”：70，“corriente”：30}，
{“voltaje”：130，“corriente”：Math.random（）*130+10}，
{“voltaje”：160，“corriente”：Math.random（）*130+10}，
{“voltaje”：190，“corriente”：30}
],
[
{“voltaje”：190，“corriente”：30}，
{“voltaje”：160，“corriente”：Math.random（）*130+10}，
{“voltaje”：200，“corriente”：30}
],
[
{“voltaje”：200，“corriente”：30}，
{“voltaje”：130，“corriente”：Math.random（）*130+10}，
{“voltaje”：160，“corriente”：Math.random（）*130+10}，
{“voltaje”：190，“corriente”：Math.random（）*130+10}
]
];
var数据集1=[]
console.log（数据集[1][1]）
/*
var数据集=d3.range（1.map）（函数（d）{
返回{
x:d*30+10，
y:Math.random（）*130+10
}
});
*/
var lineGenerator=d3.svg.line（）
.x（功能（d）{
返回伏尔泰
})
.y（功能（d）{
返回d.corriente
})
.插入（“单调”）
功能显示行（数据）{
var line=backLayer.selectAll（空）
.数据（数据）
.输入（）
.append（“路径”）
艾特先生({
d：线路生成器（数据），
填写：'无'，
笔画：“红色”，
“笔划宽度”：“3px”
});
var totalLength=line.node（）.getTotalLength（）；
line.attr（“笔划数组”，总长度+“”+总长度）
.attr（“行程偏移”，总长度）
.transition（）
.期限（2000年）
.ease（“线性”）
.attr（“行程偏移”，0）；
}
dataSet1.push（数据集[0]）
显示行（数据集[0]）
变量i=0
var l=dataSet.length
控制台日志（i）
setTimeout（函数（）{
setInterval（函数（）{
我++
如果（i可能是这样，你必须简化它，我让它不简单，因为我想让你明白，如果你知道轴的最小最大值，它可以用单个svg，但我在3个svg上做，我希望你可以学习，让它成为你想要的


var数据集=[
[
{“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}
],
];
forEach（函数（d，i）{
var svg=d3.select（“#数据集”+（i+1））；
var backLayer=svg.append（“g”）.attr（'id'，'back'+i）；
var frontLayer=svg.append（“g”）.attr（'id'，'front'+i）；
})
var数据集1=[]
var数据集2=[]
var数据集3=[]
console.log（数据集[1][1]）
/*
var数据集=d3.range（1.map）（函数（d）{
返回{
x:d*30+10，
y:Math.random（）*130+10
}
});
*/
功能显示行（数据、svg、i）{
var lineGenerator=d3.svg.line（）
.x（功能（d）{
返回伏尔泰
})
.y（功能（d）{
返回d.corriente
})
.插入（“单调”）
变量行=d3。选择（“#返回”+i）。选择全部（空）
.数据（数据）
.输入（）
.append（“路径”）
艾特先生({
d：线路生成器（数据），
填写：'无'，
笔画：“红色”，
“笔划宽度”：“3px”
});
var totalLength=line.node（）.getTotalLength（）；
line.attr（“笔划数组”，总长度+“”+总长度）
.attr（“行程偏移”，总长度）
.transition（）
.期限（2000年）
.ease（“线性”）
.attr（“行程偏移”，0）；
}
forEach（函数（d，i）{
如果（i==0）{
var数据=数据集1
}else如果（i==1）{
var数据=数据集2
}否则{
var数据=数据集3
}
var svg=d3.select（“#数据集”+（i+1））；
data.push（数据集[i]）
显示行（数据集[i]，svg，i）
})
变量i1=（-1）
变量i2=（-1）
变量i3=（-1）
var t=1
setTimeout（函数（）{
setInterval（函数（）{
t++
forEach（函数（d，i）{
var newData=[{'voltaje'：10+50*t+100，'corriente'：Math.random（）*130+10*1}]
如果（i==0）{
i1++
var数据=数据集1
newData.unshift（数据[i1][data[i1].length-1]）
console.log（i，数据[i]）
}else如果（i==1）{
i2++
var数据=数据集2
newData.unshift（data[i2][data[i
  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}
    ]
  ];

newData =  [last voltaje and corriente, new data]