D3.js：餅圖，只爲外部區域添加一個邊框

Question

我在D3中得到了一個餅圖，用一個筆劃來分隔每個切片。但是，我希望僅將邊框添加到切片的外部區域，而不是連續線，而是要考慮原始切片中的筆劃創建的間隙。看到我的圖像澄清。任何想法如何做到這一點？

加入另一組弧充當邊界見http://jsfiddle.net/4xk58/

arcs.append("path") 
.attr("fill", function (d, i) { 
return color(i); 
}) 
.attr("d", arc).style('stroke', 'white') 
.style('stroke-width', 5); 

Answer 1

我解決了這個問題，增加了兩個額外的拱組，最多三個。 第一個是正常的餡餅，沒有招

arcs.append("path") 
.attr("fill", function (d, i) { 
    return color(i); 
}).attr("d", arc); 

第二個會，我想在首位添加邊框。這只是一組圍繞我們原始拱門的拱門，但顏色不同。還沒畫畫。

最後，第三archset將是一個真正吸引我想

//Draw phantom arc paths 
phantomArcs.append("path") 
    .attr("fill", 'white') 
    .attr("fill-opacity", 0.1) 
    .attr("d", arcPhantom).style('stroke', 'white') 
    .style('stroke-width', 5); 

這彌補了效果招，見http://jsfiddle.net/odiseo/4xk58/4/

Answer 2

您可以模擬這一點。

var arcBorder = d3.svg.arc() 
    .innerRadius(outerRadius) 
    .outerRadius(outerRadius + border); 

// etc 

arcs.append("path") 
    .attr("fill", "black") 
    .attr("d", arcBorder); 

完成jsfiddle here。