D3.js, wie die Linien nicht im Bogen eines Ringdiagramm gehen zu machen

Question

ich nach diesem example ein Ringdiagramm mit Beschriftungen machen will:

jedoch

, ich mag nicht die Linien, um in den inneren Bereich des Bogens einzutreten. Ich möchte nur, dass sie den Umfang des Bogens berühren, ohne ihn zu betreten.

Bietet D3.js irgendwelche vorgefertigten Funktionen, um die Mitte des Bogenumfangs zu ermitteln, oder gibt es eine andere Möglichkeit, SVG zu verwenden, um die Linien zu ändern.

Answer 1

Wahrscheinlich ist der einfachste Weg, die Reihenfolge der Elemente neu anzuordnen. Da SVG-Elemente in Dokumentreihenfolge gezeichnet werden, hat dies den Effekt, dass Elemente oben von anderen Elementen gerendert werden, die sie erfolgreich sind. Das Beispiel verwendet drei Gruppen, um die Slices, die Textbeschriftungen und die Linien anzuordnen.

svg.append("g").attr("class", "slices"); // 1. 
svg.append("g").attr("class", "labels"); // 2. 
svg.append("g").attr("class", "lines"); // 3. 

die <g> für die Scheiben bis zum Ende Indem dieser Teil der Linien decken geben den Blick, wie sie auf dem äußeren Bogen der Scheiben beendet.

svg.append("g").attr("class", "labels"); // 2. 
svg.append("g").attr("class", "lines"); // 3. 
svg.append("g").attr("class", "slices"); // 1. 

Es sind keine weiteren Einstellungen erforderlich. Werfen Sie einen Blick auf diese working example.