如何设置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，你不” t必须是即低层次;只需考虑要绘制的角度范围，并将其表示为可以不间断（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)");