如何在半圆上对齐 D3 圆

Posted 2023-03-05

【中文标题】如何在半圆上对齐 D3 圆

【英文标题】：How to align D3 circles on semicircle

【发布时间】：2021-06-06 10:31:57

【问题描述】：

我有一个半圆形，我需要对齐从圆形创建的收音机。收音机的数量将是动态的，并且需要保持居中。这是我目前拥有的。

更新，刚刚意识到这 2 个屏幕截图可能会令人困惑。收音机的顺序不一样。忽略那个。我只需要对齐正确，

这是想要的结果。

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

【问题讨论】：

我不太确定我是否理解你。请尝试 innerRadius(INNER_RADIUS-1) .outerRadius(INNER_RADIUS); 而不是 .innerRadius(radiusArcRadios - 9) .outerRadius(radiusArcRadios - 10); 用于 arcRadios

@enxaneta 我刚刚更新了帖子。如果那是混乱

半圆不是问题。正确对齐。我需要收音机对准那条弧线

如果有偶数个radio，居中应该如何工作？

@backtick 在拱门上均匀分布

【参考方案1】：

给定您首选的弧角 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 偏移取反即可获得左侧点的位置。

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

【参考方案2】：

虽然backtick's answer 是一个漂亮的数学解释，但您可以通过简单地混合使用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 属性。