score:3

Accepted answer

Instead of using your x array as a base for mapping the y values, do it the other way around:

const yValueArray = [
  [0, 20, 30, 40, 50],
  [0, 200, 250, 400, 450]
];

const xValueArray = [0, 10, 20, 30, 40];

const data = yValueArray.map(data =>
  data.map((d, i) => ({
    x: xValueArray[i],
    y: d
  }))
);

console.log(data);

This will work for how many inner arrays you have on yValueArray.

Then use that data in your enter selection:

const yValueArray = [
  [0, 20, 30, 40, 50],
  [0, 200, 250, 400, 450]
];

const xValueArray = [0, 10, 20, 30, 40];

const data = yValueArray.map(data =>
  data.map((d, i) => ({
    x: xValueArray[i],
    y: d
  }))
);

const x = d3.scaleLinear();
const y = d3.scaleLinear();

const lineFunction = d3.line()
  .x(function(d) {
    return x(d.x);
  })
  .y(function(d) {
    return y(d.y);
  })
  .curve(d3.curveLinear);

const path1 = d3.select("svg").selectAll(null)
  .data(data)
  .enter()
  .append("path")
  .attr("d", lineFunction)
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="400"></svg>


Related Query

More Query from same tag