如何将 animation 添加到 D3 自定义收音机

Question

我的收音机对齐在一个拱门上。

我想添加一个过渡，将选定的内部蓝点沿拱门滑动到新选择的收音机。

我有一个工作演示设置。 工作演示

Answer 1

在小提琴中查看解决方案（单击蓝色按钮）：

只需将按钮放在“g”中并使用过渡旋转它：

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

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

Answer 2

另一种选择是沿路径使用animateMotion ：

 <svg width="300" height="200"> <path fill="none" stroke="blue" stroke-width="3" d="M 20,20 A 100,100 0 0 0 220,20" /> <circle r="10" fill="white" stroke="blue" stroke-width="3"> <animateMotion dur="3s" repeatCount="indefinite" path="M 20,20 A 100,100 0 0 0 220,20 A 100,100 1 1 1 20,20" /> </circle> </svg>