how to add animation to D3 custom Radios

Question

I have radios aligned on an arch.

I would like to add a transition that slides the selected inner blue dot along the arch to the newly selected radio.

I have a working demo setup. WORKING DEMO

user_10756489 · Answer

See a solution in the fiddle (click on the blue button):

Just put the button in a "g" and rotate it with transition:

const button = d3.select("#button");
let angle = 60;

button.on("click", () => {
 angle = -angle;
 button.transition().duration(1000).attr("transform", `translate(${cX}, ${cY}) rotate(${angle})`);
});

user_10756489 · Answer

Another option is to use animateMotion along the path:

how to add animation to D3 custom Radios

2 Answers