Question

我使用d3绘制一个带圆弧的圆圈。这适用于绘制从10度到20度甚至300-350度开始的部件，但是：

有时候我需要将弧度从350度绘制到5度，所以弧度为15度，而不是从5一直到350的弧度。有没有办法指定大弧标志，或者使用d3.svg.arc（）时扫描标志？（注意，交换开头和结尾与d3.svg.arc（）

没有区别

Answer 1

我是d3的新手所以也许有一些更直接的东西。

您可以将角度定义为0 - ＆gt;扫过，然后逆时针旋转。所以，对于你的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)");

如何在d3.svg.arc（）中设置大弧或扫描标志

2 个答案: