How do I graph an individual line for each the groups within a Javascript map object using D3.js

Question

I have a dataset called graphData with three values, wavelength, magnitude, and 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...
]

I've grouped the dataset using d3.group() using the name value as a key

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

Which should return a map structure like this:

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

But when I try and draw that data onto my graph with

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

I get the following error: Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".

I figure that d3.line().x(function(d){return +d.wavelength}) isn't returning an array of wavelength and magnitude data pairs like I want it to, but I'm not sure how to expose the right data within the map.

How do you navigate through a map and graph new lines for each of the objects contained within a map?