javascript - 如何将动画添加到 D3 自定义收音机

Question

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

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

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

标签： javascriptreactjssvgd3.js

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})`);
});