javascript - 无法使用 d3.js 在 svg 中绘制圆 Angular 矩形

Question

Here是我的代码:

var svg = d3.select("#drawRegion")
                .append("svg");

svg
	.attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 400 100");
  

var roundedPath = svg
								.append("path");

var path = "M0 100 L0 0 L300 0 A100 100 0 0 0 0 300 100 Z"

roundedPath
				.attr("d", path)
        .attr("fill", "none")
        .attr("stroke-width", "2px")
        .attr("stroke", "#000");

#drawRegion {
    width: 400px;
    height: 100px;
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: relative;
}

<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

我按照文档做了所有事情，我希望得到右下角圆 Angular 的矩形。但我得到的是一些奇怪的形状。

根据this解决方案可能是更改 large-arc-flag、sweep-flag 值，我尝试了 0 和 1 的所有 4 种可能的组合，但仍然出现一些奇怪的形状。

我在这里做错了什么？

Answer 1

有一些问题:

1. Arc (A) 命令中的值太多。
2. 您的圆弧终点坐标错误。您需要从 300,0 扫到 200,100(而不是 300,100)。
3. 您的扫描标志错误。它必须是“1”(顺时针)。

var svg = d3.select("#drawRegion")
                .append("svg");

svg
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 400 100");
  

var roundedPath = svg
                    .append("path");

var path = "M0 100 L0 0 L300 0 A100 100 0 0 1 200 100 Z"

roundedPath
        .attr("d", path)
        .attr("fill", "none")
        .attr("stroke-width", "2px")
        .attr("stroke", "#000");

#drawRegion {
    width: 400px;
    height: 100px;
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: relative;
}

<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>