javascript - 如何在D3中制作半圆？

.jonsIdea {
background-color: white;
}

    <div class="jonsIdea">
        <div class="canvas">
            <svg width="90vw" height="100vh">
                <text text-anchor="middle" x="50vw" y="5vh" font-family="MarsBook" font-size="2vw" fill="black">
                    Please select your businesses
                </text>
                <circle r='7vw' cx='50vw' cy='50vh'></circle>
            </svg>
        </div>
    </div>

我一直在网上搜索，但无法使用d3.js找到一个简单的半圆的例子。

如您所见，我在页面中间附加了一个圆圈。我的目标是在圆圈内有两个按钮，这些按钮显示为用户可以单击的半圆圈。如果它们彼此顶着，而不是彼此顶着，那将是很棒的。

有人有绘制半圆的代码吗？

提前致谢

最佳答案

我想说，用于创建半圆的惯用D3是在圆弧生成器（<path>）中附加一个d3.arc()并设置半圆结构，其中起始角度和终止角度之间的差为Math.PI。

const svg = d3.select("svg");

const arcGenerator = d3.arc()
  .outerRadius(100)
  .innerRadius(0)
  .startAngle(-Math.PI / 2)
  .endAngle(Math.PI / 2);

const arc = svg.append("path")
  .attr("transform", "translate(150,120)")
  .attr("d", arcGenerator());

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>