如何使用仅具有外部半径或圆弧的d3.js绘制圆弧？

Question

要使用d3.js绘制弧线，我们需要使用函数

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

这使从A点到B再回到A的路径。我应如何使用从A到B绘制简单弧线？最后，这将是定义为startAngle，endAngle和radius的行

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 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])