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?

Answer 1

Since the output of d3.group is a javascript Map, it needs to be converted into an array of [key,value] tuples in order to be iterable:

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

With this change, the sortedGraphData now has the following structure:

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

Using sortedGraphData with append will create a path for each dataset, and the d attribute of the SVG path can be calculated by passing the values to the line generator function. Since the value array is the second element of each dataset, it can be accessed with the index 1:

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