D3js -在饼状图中添加路径之间的透明间隙

D3js - Add transparent gap between path in pie chart

本文关键字：之间 路径 透明 间隙 添加 D3js      更新时间：2023-09-26

我用d3js制作了一个简单的饼状图，我想在每个路径之间添加透明的间隙。

paths = pieWrap.selectAll("path")
            .data(pie(data)).enter()
            .append("path")
            .style("fill", "rgba(90, 168, 217, 1)")
            .style("stroke", "#FFF")
            .style("stroke-width", "1")
            .style("stroke-opacity", "0")
            .attr("d", arc);

示例:http://jsfiddle.net/x4p0eLmL/2/

要知道，在我的情况下，背景是一个图像，所以我不能使用它的颜色。我试过描边不透明，但似乎不起作用。有一个正确的方法来做d3js?

谢谢

我有同样的想法@redress建议:http://jsfiddle.net/x4p0eLmL/9/。新增部分如下:

.attr("transform", function(path) {
    middleAngle = -Math.PI/2 + (path.startAngle+path.endAngle)/2;
    dx = 3 * Math.cos(middleAngle);
    dy = 3 * Math.sin(middleAngle);
    return "translate("+dx+", "+dy+")";
})

path具有startAngle和endAngle属性。计算出中间角并进行平移。它适用于路径之间较小的间隙。在当前示例中，每个路径都被转换为半径为+3的外圆。有一个问题是"更宽"的间隙，圆圈可能会"扭曲"

相关文章：