Svg ES6/TypeScript从数组生成多段线的方法

我想从我拥有的结构中生成几个SVG多段线：

data = [item0, item1, ...., item50]
item0 = {y1: 10, y2: 100, ...[other properties]...}
item1 = {y1: 1000, y2: 50, ...}
item2 = {y1: 500, y2: 40, ...}

因此，结构是一个项目数组，其中一个项目有多个Y值。 通过在结构（x*10）上迭代来确定x值

对于每个“y”，输出应该是一个字符串，如下所示：“x0，y1[0]x1，y1[1]x2，y1[2]…”

我可以用underline.js或类似的东西来实现：

polyLine1 = "";
_.each (data, function(item, index){
    polyLine1 += "" + index*10 + "," + item.y1
}
polyLine2 = "";
_.each (data, function(item, index){
    polyLine2 += "" + index*10 + "," + item.y2
}

我要寻找的是一种使用lambda/arrow语法初始化完整输出结构的更智能的方法：

this.polyLines = {
    polyLine1 = ...,// iterate data, pick y1 property, map x and y, reduce/join to a string
    polyLine2 = ...,
}

作为参考，我将TypeScript与Ionic2（Angular2）一起使用。

---

我知道我可以用模板绑定来实现这一点（这可能会更慢，可读性更低），但我只是想学习。

这产生了我认为您需要的东西。基本上，（来自ES5.1）就是您想要的。我正在使用lambdas（）和ES6，以及ES5.1

let数据=[{
y1:10，
y2:100
}, {
y1:1000，
y2:50
}]
让keydroduction=（b）=>Object.keys（b）.reduce（（c，d，x）=>c+=`${x*10}${b[d]}`，“”）；
让多段线=数据。减少（（a，b，i）=>{
a[`polyLine${i+1}`]=keyReduction（b.trim（）；
返回a；
}, {});
console.log（JSON.stringify（polyLines））

有什么方法可以显示一些真实的数据吗？我希望更像

data=[{y1:10，y2:100}，{y1:11，y2:101}]

，然后是它应该产生什么，因为你说一开始你想要一个字符串，但随后你有了这个

行

结构……我每秒通过串行从一块板上得到一些ADC值。这些范围从0到1024。我想在图表上显示最后50个。线意味着多段线，每个ADC输入一条。这里是元线，但我不明白为什么有人会投反对票。这是一个将一些“旧的”underline.js代码样式转换为新的基于lambda的样式的问题。svg和多段线标签是我批准的建议编辑。顺便说一句，我没有看到对这个问题的任何反对票。我有足够的代表可以看到分裂，上面写着0张赞成票和0张反对票。好吧，现在它说的是一票，因为你已经包含了更多关于输入和输出的信息：）。对不起，我以为最初所有的问题都是以一票开始的，可能会与其他网站混淆：）哇，太好了，我要求的太多了。我不想自动处理所有的子字段，但这是一个很好的技巧。我编辑了这个问题，而不是在这里提供评论。您提供的代码很好，但并不是我想要的，这是我的错误，要求是如何制定的。如果您能提供另一个答案，我将不胜感激。我在这里创建了一个JSFIDLE：使用了一些真实的数据，但是那里可能存在如何实现typescript的问题。如果你看一下呈现的JavaScript，它就像完成了一半：

acc[（`polyLine${+line）]=i+}，${+item.sensorValue；

我添加了一个没有模板文本的示例，并在这里添加了一个你的副词：这似乎很有效。谢谢。请查看我的3个修订版本（），最后的注释和OP中的编辑。

this.polyLines = {
    polyLine1 = ...,// iterate data, pick y1 property, map x and y, reduce/join to a string
    polyLine2 = ...,
}