如何使用 D3.js 以编程方式创建的数据绘制图表

Question

我正在开发一个应用程序，其中数据集具有以编程方式生成的名称，并且经常由用户创建和销毁。我想使用 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)

，但我不确定从哪里开始。我怀疑我可能笨拙地格式化我的数据，但不确定。

Answer 1

写下这个问题的快速答案，以防其他人陷入我所做的事情。本质上我完全误解了你应该如何在 d3 中呈现数据。

这是了解 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 让我重回正轨！