D3js-在餅圖中的路徑之間添加透明間隙

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的外圓。 存在“較大”間隙的問題，其中圓可能“變形”