如何設置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)");