如何在半圆上对齐D3圆 [英] How to align D3 circles on semicircle

问题描述

我有一个半圆，需要对齐从圆中创建的收音机.无线电的数量将是动态的，并且需要使它们居中.这是我目前拥有的.

UPDATE，刚刚意识到这2个屏幕截图可能令人困惑.收音机的顺序不一样.别理了.我只需要对齐是正确的，

这是理想的结果.

我在这里有一个工作演示

相应地调整文本.另外，请注意，圆元素没有 d 或 text 属性.

I have a semi circle that I need to align Radios I created from circles. The number of radios will be dynamic and will need to keep them centered. Here is what I currently have.

UPDATE, just realized that the 2 screenshots can be confusing. The order of the radios are not the same. Ignore that. I just need the alignment to be correct,

This is the desired result.

I have a working demo here WORKING DEMO

解决方案

While backtick's answer is a beautiful math explanation, you can do that with a simple mix of getPointAtLength and getTotalLength:

First you do...

const arcPathLength = arcPath.node().getTotalLength() / 2;

... where arcPath is just that gray arc the radio buttons will follow. Here I'm dividing the length by 2 because the arc goes back to the origin. Then you just do:

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)

Since I cannot fork the code without logging in, here is a screenshot of the result:

Adjust the texts accordingly. Also, pay attention to the fact that circle elements have no d or text attributes.

这篇关于如何在半圆上对齐D3圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！