I have a semi circle that I need to align Radios I created from circles. The number of radios will be dynamic and will need to keep them centered. Here is what I currently have.
UPDATE, just realized that the 2 screenshots can be confusing. The order of the radios are not the same. Ignore that. I just need the alignment to be correct,
This is the desired result.
I have a working demo here WORKING DEMO
First you do…
const arcPathLength = arcPath.node().getTotalLength() / 2;
arcPath is just that gray arc the radio buttons will follow. Here I’m dividing the length by 2 because the arc goes back to the origin. Then you just do:
svg.selectAll(null) .data(RADIO_DATA) //etc... .attr("cx", (d, i) => arcPath.node().getPointAtLength((arcPathLength/(RADIO_DATA.length - 1)) * i).x) .attr("cy", (d, i) => arcPath.node().getPointAtLength((arcPathLength/(RADIO_DATA.length - 1)) * i).y)
Since I cannot fork the code without logging in, here is a screenshot of the result:
Adjust the texts accordingly. Also, pay attention to the fact that circle elements have no