我有以下格式的数据,我想使用 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 轴值的数据,因此我还没有找到修改这些问题解决方案的方法。
最佳答案
此处传统的 D3 答案是为每个对象附加一个组,然后为每个组的每个 y
值附加一个圆圈。
但是,由于您似乎是 D3 初学者(如果我错了请纠正我),我建议只创建一个对象数组,您可以将其传递给 data
。
有几种方法可以做到这一点,例如:
const newData = data.reduce(function(a, c) {
return a.concat(c.y.map(function(d) {
return {
x: c.x,
y: d
}
}));
}, []);
这里是你的代码有那个变化:
const 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]
}
];
const newData = data.reduce(function(a, c) {
return a.concat(c.y.map(function(d) {
return {
x: c.x,
y: d
}
}));
}, []);
const x = d3.scaleLinear()
.domain([0, 2])
.range([0, 300]);
const y = d3.scaleLinear()
.domain([0, 20])
.range([0, 150]);
const svg = d3.select("svg");
svg.selectAll("circle")
.data(newData)
.enter()
.append("circle")
.attr("cx", function(d) {
return x(d.x)
})
.attr("cy", function(d) {
return y(d.y)
})
.attr("r", 4)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
关于javascript - 如何为每个 x 值绘制具有多个 y 值的散点图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55686061/