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

私はこれを2つの余分なアーチセットを追加することで解決しました。 最初のものは、ストローク

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

ことなく、第2の1は私が最初の場所に追加したい境界線となり、通常のパイです。これはオリジナルのものを取り囲む単なるアーチのセットですが、異なる色です。ストロークはまだありません。

そして最後に、第三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。