javascript - 如何将 D3 圆与半圆对齐

Question

我有一个半圆，我需要对齐我从圆创建的 radio 。 radio 的数量是动态的，并且需要保持它们居中。这是我目前拥有的。

更新，刚刚意识到这两个屏幕截图可能会令人困惑。 radio 的顺序不相同。忽略这一点。我只需要正确对齐即可，

这就是我们想要的结果。

我这里有一个工作演示 WORKING DEMO

Answer 1

给定您首选的弧 Angular A 和点数 N，找到每个点之间的 Angular 距离:

PA = A/(N - 1)。

接下来，找到从圆心到我们正在计算的点的垂直线所描述的 Angular 。

初步观察:

• 这个 Angular 最大可能值为A/2
• 如果 N 为偶数，则最小可能值为 PA/2；如果 N 为奇数，则最小可能值为 0。
• Angular 以 PA 增量变化

计算远离中心 (X) 的点，我们可以使用我们定义的术语来描述 Angular :

A/2 - PA *(地板(N/2) - X)

对于下面的示例，X 分别为 1 和 2。

假设:

• A = 90°(未准确描述)
• N = 4

由此而来:

• PA = 30°

代入这些值，我们得到:

45 - 30 * (楼层(2) - 1) = 15

和

45 - 30 * (楼层(2) - 2) = 45

现在我们有了 Angular a，我们可以使用三 Angular 学(具体来说 SOH-CAH-TOA )来找到该点相对于中心的 x 和 y 偏移。

请注意，由于铅垂线左侧的点是其右侧对应点的镜像，因此您只需减去中心的 x 偏移即可获得左侧点的位置。

Update: Here's a simpler (but still math-based) implementation.