如何使用Ramda将对象坐标转换为SVG polyline所需的字符串格式

我正在尝试使用Ramda获取x,y坐标，用于在svg中绘制polyline。

我有一个edge对象，包含所需的全部点位，结构如下：

const edge = {
    "id": "e1_s0",
    "startPoint": {
        "x": 212,
        "y": 505.33333333333326
    },
    "endPoint": {
        "x": 232,
        "y": 302
    },
    "bendPoints": [
        {
            "x": 222,
            "y": 505.33333333333326
        },
        {
            "x": 222,
            "y": 302
        }
    ],
    "incomingShape": "n1",
    "outgoingShape": "n2"
}

我尝试用Ramda从startPoint、endPoint和bendPoints中提取x,y，写出了如下代码：

R.pipe(
    R.pick(['bendPoints', 'endPoint', 'startPoint']),
    R.values,
    R.flatten,
    R.sortBy(R.prop('x'))
)(edge)

运行后得到的结果如下：

[
    {x: 212,y: 505.33333333333326},
    {x: 222,y: 505.33333333333326},
    {x: 222,y: 302},
    {x: 232,y: 302}
]

但我需要的是坐标对用逗号拼接、不同坐标对之间用空格分隔的字符串，效果如下：212,505.33333333333326 222,505.33333333333326 222,302 232,302，请问该如何实现？

完整解决方案 #

R.pipe(
    R.pick(['bendPoints', 'endPoint', 'startPoint']),
    R.values,
    R.flatten,
    R.sortBy(R.prop('x')),
    R.map(R.pipe(R.props(['x', 'y']), R.join(','))),
    R.join(" ")
)(edge

内容的提问来源于stack exchange，提问作者omygoodness