円弧を描いている間にD3にオーバーラップしないセクタを作成できません

Question

円グラフを描いている間、セクタが重なっています。ファインダーツールを使用すると、各セクターはゼロから始まります（前のエレメントの終了角度から開始する必要があります）。また、セクタのサイズは累積されているように見えます（データ1,2,4は私にセクタ1,3,7のセクタを与えます）。私はfiddle hereにそれを持っています。

var height = 400, width = 600, radius = Math.min(height, width)/2; 
var colors = ["red", "pink", "green", "yellow", 
       "blue","magenta","brown","olive","fuchsia","orange"]; 
var data = [1,2,1,2,1,2,1,3,1]; 

var chart = d3.select("#chart").append("svg") 
    .attr("width", width).attr("height", height) 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var pie = d3.layout.pie().sort(null).value(function (d) { return d; }); 
var arc = d3.svg.arc().startAngle(0).innerRadius(0).outerRadius(radius); 

var grx = chart.selectAll(".sector").data(pie(data)) 
    .enter().append("g").attr("class", "sector"); 

grx.append("path") 
    .attr("d", arc) 
    .style("fill", function (d, i) { 
    console.log(d); 
    return colors[i]; 
    }); 

Answer 1

各データポイントで開始角度をゼロに設定しています。それは再計算され、ゼロから何かの角度にわたって広がります。開始角度を指定しない場合、デフォルトでは前の要素の終了角度に設定されます。

var pie = d3.layout.pie().sort(null).value(function (d) { return d; }); 
var arc = d3.svg.arc().innerRadius(0).outerRadius(radius);