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>

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

1 个答案: