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

如果您在纯色背景上绘制（白色或其他），则可以添加描边以在不修改角度的情况下实现此效果。

这是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。

弧之间的D3间距

2 个答案: