如何为D3自定义单选框添加动画效果。

Question

我有一组按弧线对齐的收音机。

我想添加一个过渡效果，使选定的内部蓝点沿着弧线滑动到新选择的收音机。

我已经准备好了一个演示实例。 演示实例

- texas697

Answer 1

在fiddle中查看解决方案（点击蓝色按钮）：

将按钮放入"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})`);
});

- Michael Rovinsky

---

我需要在选择未选中的单选框时它能够工作。目前它只能在已选中的单选框上工作。 - texas697

你能使用我的演示吗？ - texas697

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>

- Michael Rovinsky