Question

我有一个用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有没有正确的方法呢？

由于

Answer 1

我和@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的外圆。问题是＆＃34;更广泛＆＃34;圆圈可能会变形的空白＆＃34;

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

1 个答案: