I have a 2 rows of circles (imagine 2 rows of seats in a seating chart) that are on straight line, like this:
I need to curve the rows relative to the longest row (ie row B). I can correctly calculate the curve of each row:
Row B's circles follow the path correctly, but I need row A's circles to also follow the path as well. You can see that the circles are off. I need the X position of each circle to stay fixed, but Y to follow that direction of the path. I'm trying to calculate what the Y position of each circle in row A would be based on it's Y's position on that path, but can't seem to figure it out. Is there a specific calculation on this?
The way I'm attempting this is:
row.seats.forEach((seat, index) => {
const offset = index * spacing;
const point = curvePath.getPointAtLength(offset);
;
var curveY = point.y; //keep x fixed and only move y
seat.attr('cy', curveY);
})
Not getting the expected result. I need to find the Y position of that path if I were to center row A's circles on to that path so it ultimately looks like this:
How can I determine the path Y position of each circle based on the circle's x position? I've posted a codepen here to demo the paths: https://codepen.io/iamakimmer/pen/eYKOawd. I'm using RaphaelJS but ultimately it's SVG paths and shapes.


