如何使用 D3.js 为 Javascript 地图对象中的每个组绘制单独的线

Question

我有一个名为 graphData 的数据集，其中包含三个值：

wavelength

、

magnitude

和

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...
]

我使用

d3.group()

使用

name

值作为键对数据集进行分组

let sortedGraphData = d3.group(graphData, d => d.fullId)

它应该返回这样的地图结构：

{key: "dataset 1"
values: [
{wavelength: 2, magnitude: 20}
{wavelength: 3, magnitude: 22}
{wavelength: 4, magnitude: 19}
]}

{key: "dataset 2"
values: [
{wavelength: 2, magnitude: 14}
///and so on...
]}

但是当我尝试使用

将该数据绘制到我的图表上时

 let valueline = d3.line()
.x(function(d){return x(+d.wavelength)})
.y(function(d){return y(+d.magnitude)});


graph.append("path")
.data(sortedSessionGraphData)
.attr("class", "line")
.attr("d", valueline);

我收到以下错误：

错误：属性 d：预期数字，“MNaN，NaNLNaN，NaN”。

我认为

d3.line().x(function(d){return +d.wavelength})

没有像我想要的那样返回波长和幅度数据对的数组，但我不确定如何在地图中公开正确的数据。

如何浏览地图并为地图中包含的每个对象绘制新线？

Answer 1

由于

d3.group

的输出是一个 javascript Map，因此需要将其转换为

[key,value]

元组数组才能可迭代：

let sortedGraphData = Array.from(d3.group(graphData, d => d.fullId))

经过此更改，sortedGraphData 现在具有以下结构：

[
  ["dataset 1", [{wavelength: 2, magnitude: 20}, ...]  ],
  ["dataset 2", [{wavelength: 2, magnitude: 14}, ...]  ],
]

将

sortedGraphData

与

append

一起使用将为每个数据集创建一个路径，并且可以通过将值传递给行生成器函数来计算 SVG 路径的

d

属性。由于值数组是每个数据集的第二个元素，因此可以使用索引 1 来访问它：

.attr("d", d => valueline(d[1]))

.