使用 D3 绘制以编程方式创建的数据的正确方法

Question

我正在开发一个应用程序，其中的数据集具有以编程方式生成的名称，并且经常由用户创建和销毁。我想使用 D3.js.

在应用程序中绘制这些数据集

我的数据集是这样存储的：

Wavelength	Transducer Output 1	Transducer Output 2	Transducer Output 3
1	19	21	23
3	23	20	21
5	33	23	19
7	33	24	45
etc..	etc..	etc..	etc..

波长应沿 x 轴映射，幅度应沿 y 轴映射，每组幅度用单独的线表示。

我正在努力思考如何将此类数据传递给 D3.js。我阅读的每个教程都使用不同的数据格式和不同的代码。我已经阅读了文档，但它对我学习如何为 D3 格式化数据也没有太大帮助。

从脚本中将这些数据集映射到图形上的正确方法是什么？目前我正在尝试使用 d3.csvParse(data)，但不确定从那里去哪里。我怀疑我可能会笨拙地格式化我的数据，但我不确定。

Answer 1

写一个快速答案以防其他人被困在我做的地方。基本上我完全误解了你应该如何在 d3 中呈现数据。

Here's a useful guide to understanding d3 data handling

Here's a useful guide on how to use that data once you have it structured correctly

一旦我意识到我需要创建一个数组来表示我想要绘制的每个点，事情就变得容易多了。我创建了一个 object，其中包含描述单个数据点的三个属性。

每个对象都有一个 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 将我推回正轨！