📝 原文（日文）发表于 forge.workstyle.tech。
交互式雷达图简介
在用于调整多维参数的用户界面中，雷达图（也称为蜘蛛网图）非常直观。通过八边形的面积和形状一眼就能看出当前的平衡状态，这比排列八个滑块更加直观。
然而，在许多实现中，雷达图是只读的。数值通过滑块输入，雷达图仅显示结果。更进一步，如果能够直接拖动雷达图的顶点，将极大地改善操作体验。此外，如果滑块和雷达图能够双向同步，用户可以从任意一端进行操作。
本文记录了使用 React 实现可缩放矢量图形（SVG）雷达图顶点拖拽编辑以及与 N 个滑块双向同步的模式。关键点包括坐标变换和指针事件处理。
设计思路：单一状态，两种界面
谈到双向同步，人们可能会想象出一幅复杂的画面，即“雷达图的状态”和“滑块的状态”相互反映。然而，这是一个陷阱。拥有两个状态会使哪个状态作为唯一真实来源变得模糊，从而导致无限循环和不一致。
正确的方法很简单：只保留一个状态。雷达图和滑块都从这单一状态读取数据并绘制自身，当被操作时，它们调用同一个更新函数。在这里，我们将存储每个轴键值的状态仓库（sliders）和更新函数（setSlider）视为唯一的真实来源。
export default function RadarChart({ axes, sliders }: { axes: Axis[]; sliders: Sliders }) {
const setSlider = useCanvaStore((s) => s.setSlider);
// 读取滑块数据并绘制，拖拽时调用 setSlider
}
通过这样做，双向同步自动实现。如果移动了滑块，sliders 状态会被更新，雷达图随之重绘。如果拖动了雷达图，它会调用相同的 setSlider 函数，因此滑块会立即跟随变化。同步逻辑本质上为零。这种设计的精髓在于构建一个不需要同步的结构，而不是试图去实现同步。
从数值到顶点坐标（绘制方向）
首先，我们沿正向进行，寻求每个顶点的坐标 fr
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
