我有一个半圆，需要对齐我从圆创建的无线电。无线电的数量将是动态的，需要使它们居中。这是我目前拥有的。
更新，刚刚意识到这两个屏幕截图可能会令人困惑。收音机的顺序是不一样的。忽略那个。我只需要对齐正确，
这是想要的结果。
我在这里有一个工作演示 WORKING DEMO
如何在半圆上对齐 D3 圆
IT技术
javascript
html
reactjs
svg
d3.js
2021-05-20 19:47:50
2个回答
给定您首选的弧角 A 和点数 N，找出每个点之间的角距离：
PA = A / (N - 1).
接下来，找到从圆心到我们正在计算的点的垂直线所描述的角度。
初步观察：
- 这个角度的最大可能值是
A / 2 - 最小的可能值是
PA / 2如果 N 是偶数，0如果 N 是奇数。 - 以 PA 为增量的角度变化
计算远离中心 (X) 的点，我们可以使用我们定义的术语来描述角度：
A / 2 - PA * (floor(N / 2) - X)
对于下面的示例，X 分别为 1 和 2。
假设：
- A = 90°（未准确描绘）
- N = 4
从中可以看出：
- PA = 30°
插入这些值，我们得到：
45 - 30 * (floor(2) - 1) = 15
和
45 - 30 * (floor(2) - 2) = 45
现在我们有了角度a，我们可以使用三角学（特别是SOH-CAH-TOA）来找到该点相对于中心的 x 和 y 偏移量。
请注意，由于铅垂线左侧的点是右侧对应点的镜像，因此您只需从中心取反 x 偏移即可获得左侧点的位置。
虽然反引号的答案是一个漂亮的数学解释，但您可以通过简单的getPointAtLength和组合来做到这一点getTotalLength：
首先你做...
const arcPathLength = arcPath.node().getTotalLength() / 2;
...arcPath单选按钮将遵循的灰色弧线在哪里。在这里，我将长度除以 2，因为弧会回到原点。然后你只需要：
svg.selectAll(null)
.data(RADIO_DATA)
//etc...
.attr("cx", (d, i) => arcPath.node().getPointAtLength((arcPathLength/(RADIO_DATA.length - 1)) * i).x)
.attr("cy", (d, i) => arcPath.node().getPointAtLength((arcPathLength/(RADIO_DATA.length - 1)) * i).y)
由于我无法在不登录的情况下分叉代码，这里是结果的屏幕截图：
相应地调整文本。另外，请注意圆元素没有dortext属性这一事实。