如何在d3中制作半圆？

Question

.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 的简单半圆的示例。

如您所见，我在页面中间附加了一个圆圈。我的目标是在圆圈内有两个按钮，它们显示为用户可以单击的半圆。如果他们在彼此之上，而不是彼此相邻，那就太好了。

有没有人有画半圆的代码？

提前致谢

Answer 1

我想说的是，用于创建半圆的惯用 D3 是附加 a<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>