如何对齐半圆上的D3圆

Question

我有一个半圆，我需要对齐收音机我创建的圆圈。无线电的数量将是动态的，需要保持它们的中心位置。这是我目前所拥有的。

更新，刚刚意识到这两个截图可能会令人困惑。收音机的顺序不一样。别理那事。我只需要正确的排列，

​

​

这是期望的结果。

​

​

我这里有一个工作演示，工作演示

Answer 1

虽然回击答案是一个漂亮的数学解释，但您可以使用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)

由于我无法在不登录的情况下分叉代码，下面是结果的屏幕截图：

​

​

相应地调整课文。另外，还要注意圆元素没有d或text属性的事实。

Answer 2

给定你喜欢的弧角A和点数N，找出每个点之间的角距离：

PA = A / (N - 1)。

接下来，找出圆心的垂直线所描述的角度，以及我们正在计算的点。

初步意见：

• 这个角度的最大可能值是A / 2。
• 当N为偶数时，最小可能值为PA / 2，若N为奇数，则为0。
• 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-偏移量从中间抵消，就可以得到左手点的位置。

更新:这里有一个更简单(但仍然基于数学的)实现。

​

​