弧之间的D3间距

Question

我对D3图表很新,我使用D3创建了我的第一个圆环图,但我想知道是否有任何方法我可以在每个弧之间放置一些填充/间距.

我知道我可以减少每个弧的起始和终止角度,例如,

弧1:从90度到120度弧2:从120度到150度

减小弧形1以上的角度:从92度到118度弧度2:从122度到148度等等.

但我很好奇是否有更简单的方法来放置一些间距.

这是我的代码,你可以在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

这实际上就是你要找的东西:

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

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

Answer 2

如果您在纯色背景(白色或其他)上绘图,则可以添加笔触以实现此效果而无需修改角度.

这是一个修改过的小提琴.

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在每个切片的开始/结束处用白色笔划绘制和定位s.