svg - 如何在 d3.svg.arc() 中设置大弧或扫标志

Question

我正在使用 d3 绘制圆弧。这适用于绘制从 10 度到 20 度甚至 300-350 度开始的零件，但是：

有时我需要绘制从 350 度到 5 度的圆弧，所以用 15 度的圆弧代替从 5 一直延伸到 350 的圆弧。有没有办法指定大圆弧标志或扫掠标志时使用 d3.svg.arc()？（注意，交换开始和结束对 d3.svg.arc() 没有影响

Answer 1

我是 d3 的新手，所以也许有更简单的方法。

您可以将角度定义为 0 -> 扫掠，然后逆时针旋转。因此，对于您的 350 到 5：

var arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(0)
    .endAngle(15 * (Math.PI/180));

svg.append("path")
    .attr("d", arc)
    .attr("transform", "rotate(-10)");

这是一个jsFiddle。

Answer 2

虽然 d3 是低级别的，d3.svg.arc但您不必是那么低级别；想想你想画的角度范围，并把它表达为一个开始和结束的数字，你可以在没有间断的情况下交叉（0° -> 360° 是典型的间断）。您可以同时使用正角和负角，因此将 -10° 用于 350° 会产生连续范围 [5…-10] ( jsfiddle )：

var svg = d3.select("body").append("svg")
  , r2d = Math.PI / 180
  , arc = d3.svg.arc()
    .innerRadius(50)
    .outerRadius(70)
    .startAngle(5 * r2d)
    .endAngle(-10 * r2d);

svg.append("g")
    .attr("d", arc)
    .attr("transform", "translate(200,200)");