我正在开发一个应用程序,其中数据集具有以编程方式生成的名称,并且经常由用户创建和销毁。我想使用 D3.js 将应用程序中的这些数据集绘制到具有多个组的折线图上,例如 this。
我的数据集是这样存储的:
波长 | 传感器输出1 | 传感器输出2 | 传感器输出3 |
---|---|---|---|
1 | 19 | 21 | 23 |
3 | 23 | 20 | 21 |
5 | 33 | 23 | 19 |
7 | 33 | 24 | 45 |
等等.. | 等等.. | 等等.. | 等等.. |
波长应沿 x 轴映射,幅度沿 y 轴映射,每组幅度用单独的线表示。
我正在努力思考如何将此类数据传递到 D3.js。我阅读的每个教程都使用不同的数据格式和不同的代码。我已阅读文档,但它对我学习如何格式化 D3 数据也没有多大帮助。
如何从脚本中将这些数据集映射到图表上?目前我正在尝试使用
d3.csvParse(data)
,但我不确定从哪里开始。我怀疑我可能笨拙地格式化我的数据,但不确定。
写下这个问题的快速答案,以防其他人陷入我所做的事情。本质上我完全误解了你应该如何在 d3 中呈现数据。
一旦我意识到我需要创建一个代表我想要绘制的每个点的数组,事情就变得容易多了。我创建了一个具有三个描述单个数据点的属性的对象。
每个对象都有一个
wavelength
、magnitude
和 name
。
wavelength
是数据点在 x 轴上的位置,magnitude
是其在 y 轴上的位置,name
允许我区分不同的数据集。
let array = [
{name: "dataset 1", wavelength: 2, magnitude: 20}
{name: "dataset 1", wavelength: 3, magnitude: 22}
{name: "dataset 1", wavelength: 4, magnitude: 19}
{name: "dataset 2", wavelength: 2, magnitude: 14} //and so on...
]
从那里我可以将其映射到我的图表上
svg.append("path")
.data(array)
.attr("d", d3.line()
.x(function(d) {return x(d.wavelength)})
.y(function(d) {return y(d.magnitude)})
.z(function(d) {return z(d.name)});
您还可以使用
d3.group()
按名称对数据进行分组,并手动迭代数据,单独绘制每条线
感谢@Alexander Nied 和@Gerardo Furtado 让我重回正轨!