D3@6 Generic Direction On Addressing Map Data Structures In Arrow Functions

Have an Observable using D3 v6 and am starting to use the Map data structure. While it seems array-based I am having difficulty translating how to get to different parts of maps in

Solution 1:

Based on @Robin Mackenzie's question about passing an array or individual pair I refactored the function to accept the array.

So the call became:

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

However, the important part of the solution was how to get to the elements of the Map. The missing piece was the index into the array after "data" before ".Xs"

function events(data) {
  const p = d3.path();
  const y_hub = yScale(data[0].Hub);
  for (var n=0; n < data.length; n++) {
    p.moveTo(xScale(data[n].Xs[0]),y_hub);
    p.lineTo(xScale(data[n].Xs[1]),y_hub);
    }
  p.closePath();
  return p.toString();
}

Thanks to my friend Alex Carroll for additional help on Maps.