D3.js: Kreisdiagramm, Hinzufügen eines Rahmens nur zum Outer-Bereich

Question

Ich habe ein Kreisdiagramm in D3 mit einem Strich, um jedes Segment zu trennen. Allerdings würde ich gerne einen Rand nur zum äußeren Bereich der Slices hinzufügen, nicht in einer kontinuierlichen Linie, sondern vielmehr zu den Lücken, die durch die Striche in den ursprünglichen Slices erzeugt werden. Siehe mein Bild zur Klärung. Irgendwelche Gedanken darüber, wie man das macht?

Siehe 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

Ich löste das, indem ich zwei zusätzliche Bogensätze hinzufügte, was bis zu drei ergab. Die erste ist die normale Kuchen, OHNE streicht

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

Die zweite wird die Grenze ich in erster Linie hinzufügen wollte. Es ist nur eine Reihe von Bögen, die unser ursprüngliches aber in einer anderen Farbe umgeben. Noch keine Schläge.

Und schließlich wird die dritte archset derjenige sein, der tatsächlich die Striche zieht ich

//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); 

wollte Dies macht sich für den Effekt, siehe http://jsfiddle.net/odiseo/4xk58/4/

Answer 2

Sie können dies simulieren, indem Sie einen anderen Satz von Bögen hinzufügen, die als Grenze wirkt.

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

// etc 

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

Vollständige jsfiddle here.