如何用 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 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>