How to align D3 circles on semicircle

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,

CURRENT PROGRESS

This is the desired result.

DESIRED RESULT

I have a working demo here WORKING DEMO

Answer

While backtick’s answer is a beautiful math explanation, you can do that with a simple mix of getPointAtLength and getTotalLength:

First you do…

const arcPathLength = arcPath.node().getTotalLength() / 2;

… where 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:

enter image description here

Adjust the texts accordingly. Also, pay attention to the fact that circle elements have no d or text attributes.

Leave a Reply

Your email address will not be published. Required fields are marked *