Javascript 如何为每个x值绘制具有多个y值的散点图？

我想用d3绘制以下格式的数据：

data = [
        { x: 0.2, y: [ 1, 2, 4 ] },
        { x: 0.3, y: [ 2 ] },
        { x: 0.5, y: [ 4, 7, 8, 12, 19 ] }
        { x: 1.4, y: [ 1, 3 ] }
       ]

通常y轴值是整数，但这里是数组，因此以下代码无法正常工作：

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
        .attr("cx", function(d){ return x(d.x) })
        .attr("cy", function(d){ return y(d.y) })
        .attr("r", 2)

我没有为数组中的每个值绘制多个圆，而是只得到一个

---

本网站上的其他类似问题只涉及具有固定数量y轴值的数据，因此我还没有找到一种方法来修改这些问题的解决方案。

为什么不先尝试展开数据数组？这应该很容易处理

数据=[{
x:0.2，
y:[1,2,4]
},
{
x:0.3，
y:[2]
},
{
x:0.5，
y:[4,7,8,12,19]，
},
{
x:1.4，
y:[1,3]
}
];
展开数据=[]；
对于（数据中的b）{
var temp=data[b].y.map（（foo）=>{
返回{
x:数据[b].x，
y:福
}
})
unwrappedData=unwrappedData.concat（温度）；
}
console.log（未包装数据）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，100）
.attr（“高度”，100）
.样式（“页边空白顶部”、“58px”）；
svg.selectAll（“圆圈”）
.数据（未包装数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回d.x
})
.attr（“cy”，函数（d）{
返回d.y
})
.attr（“r”，2）

---

这里传统的D3答案是为每个对象添加一个组，然后为每个组的每个

y

值添加一个圆

然而，由于您似乎是D3初学者（如果我错了，请纠正我），我建议您只创建一个对象数组，您可以将其传递到

数据

有几种方法可以做到这一点，例如：

const newData = data.reduce(function(a, c) {
  return a.concat(c.y.map(function(d) {
    return {
      x: c.x,
      y: d
    }
  }));
}, []);

以下是更改后的代码：

const数据=[{
x:0.2，
y:[1,2,4]
},
{
x:0.3，
y:[2]
},
{
x:0.5，
y:[4,7,8,12,19]
}, {
x:1.4，
y:[1,3]
}
];
const newData=data.reduce（函数（a，c）{
返回a.concat（c.y.map）函数（d）{
返回{
x:c.x，
y:d
}
}));
}, []);
常数x=d3.scaleLinear（）
.domain（[0，2]）
.范围（[0，300]）；
常数y=d3.scaleLinear（）
.domain（[0,20]）
.范围（[0150]）；
const svg=d3.选择（“svg”）；
svg.selectAll（“圆圈”）
.数据（新数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，功能（d）{
返回x（d.x）
})
.attr（“cy”，函数（d）{
返回y（d.y）
})
.attr（“r”，4）

---

谢谢您的回答。您的解决方案有效，但我选择了另一个，因为它大约快五倍。我想如果您有兴趣了解性能差异，我会让您知道。