d3.js - 如何使用 d3.js 绘制只有外半径或圆扇区的圆弧？

Question

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

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

这个 make 路径来自 一个 指向 乙 并返回 一个 .
我应该用什么来从 绘制简单的弧线一个 至 乙 ?
最后这将是定义的行 起始角度 , 端角和 半径

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>