score:1

Accepted answer

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


Related Query

More Query from same tag