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

我有一个名为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...
]

我使用name值作为键，使用d3.group()对数据集进行了分组

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

它应该返回如下的映射 struct :

{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);

我得到以下错误:Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".

我认为d3.line().x(function(d){return +d.wavelength})并没有像我希望的那样返回波长和幅度数据对数组，但我不确定如何在 map 中显示正确的数据.

如何在 map 中导航，并为 map 中包含的每个对象绘制新线？