如何使用d3.js画一个只有外半径或圆形扇区的弧形？

Question

为了在d3.js中绘制弧形，我们需要使用函数。

d3.arc()
  .innerRadius(..)
  .outerRadius(..)
  ...

这将使路径从A点到B，然后返回到A点。

我应该使用什么来绘制从A到B的简单弧线？

最终，这条线将由startAngle、endAngle和radius定义。

- Raf

Answer 1

很遗憾，没有原生的D3生成器可以按照你在问题中描述的方式创建弧形。当然，你可以编写自己的函数来绘制圆弧，没有任何禁止。

但是，如果你想使用D3弧生成器，有几个替代方案。

第一个替代方案非常简单，只需将outerRadius和innerRadius传递相同的值即可。例如，从0度开始到90度结束的圆弧：

var svg = d3.select("svg")
.append("g")
.attr("transform", "translate(150,75)");

var arc = d3.arc()
  .innerRadius(50)
  .outerRadius(50);
  
var sector = svg.append("path")
  .attr("fill", "none")
  .attr("stroke-width", 3)
  .attr("stroke", "darkslategray")
  .attr("d", arc({startAngle:0, endAngle:(Math.PI/2)}))

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

您可能会争辩说，正如您在问题中所述（“从点A到点B，然后返回A”），圆弧实际上是在同一位置前进并返回，这不是一个真正的圆弧。但对于现代浏览器来说，这根本没有任何区别。但是，如果您真的想进行这种纳米级的优化，您可以获取路径的第一个M和A命令，而不管innerRadius是什么。

var myString = arc({startAngle: 0, endAngle: (Math.PI / 2)}).split(/[A-Z]/);
sector.attr("d", "M" + myString[1] + "A" + myString[2])

这里是演示：

var svg = d3.select("svg")
  .append("g")
  .attr("transform", "translate(150,75)");

var arc = d3.arc()
  .innerRadius(0)
  .outerRadius(50);

var myString = arc({
  startAngle: 0,
  endAngle: (Math.PI / 2)
}).split(/[A-Z]/);

var sector = svg.append("path")
  .attr("fill", "none")
  .attr("stroke-width", 3)
  .attr("stroke", "darkslategray")
  .attr("d", "M" + myString[1] + "A" + myString[2])

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

- Gerardo Furtado

---

现在我正在使用你建议的第一个选项。但是我想也许有一个本地的API函数可以完成这个任务。 - Raf

没有，没有任何的。 - Gerardo Furtado

请编辑您的答案并将您的评论放在其顶部，这样我就可以接受它。 - Raf