D3之間的間距

Question

我對D3圖表很新穎，我用D3創建了我的第一個圓環圖，但是我想知道是否有任何可以在每個圓弧之間放一些填充/間距。

我知道我可以減少每個弧的開始和結束的角度，例如，

弧1：從90degree到120degree 弧2：從120degree到150degree

減少上述像 弧1的角：從92degree到118degree 弧2：從122度到148degree 等等......

但我很好奇，如果有更簡單的方法來放一些間距。

這是我的代碼，你可以在JSfiddle中看到完整的代碼。

var vis = d3.select(elementSelector); 
var arc = d3.svg.arc() 
.innerRadius(svgInnerRadius) 
.outerRadius(svgOuterRadius) 
.startAngle(function(d){return anglePercentage(d[0]);}) 
.endAngle(function(d){return anglePercentage(d[1]);}); 
... 

http://jsfiddle.net/24FaQ/ 

非常感謝你提前。

Answer 1

如果您在堅實的背景（白色或其他）上繪製，您可以添加描邊以實現此效果，而無需修改角度。

這是modified fiddle。

vis.selectAll("path") 
    .data(data) 
    .enter() 
    .append("path") 
    .attr("d", arc) 
    .style("fill", function(d){return color(d[2]);}) 
    .attr('stroke', '#fff') // <-- THIS 
    .attr('stroke-width', '6') // <-- THIS 
    .attr("transform", "translate(" + svgWidth/2 + ", " + svgHeight/2 + ")"); 

這適用於所有邊緣的筆劃，包括彎曲的邊緣。如果您需要避免這種情況，則必須在每個切片的開始/結束處用白色筆觸繪製並定位line。

Answer 2

其實，這是你在找什麼：

http://bl.ocks.org/mbostock/f098d146315be4d1db52

var pie = d3.layout.pie() 
    .padAngle(.02);