Implementieren Kreisdiagramm Etiketten wie von David Bueza

Question

Ich versuche, David Bueza's Pie chart labels in einem Kreisdiagramm meiner eigenen zu implementieren. Ich habe versucht, den verwendeten Code an meine Bedürfnisse anzupassen und bisher erfolgreich zu sein. Doch etwas Interessantes passiert. Die eine Sache ist, dass meine Linien an der außerhalb des Kreisdiagramms beginnen, und der andere ist, dass zwei der Aufkleber seltsame Bögen in den Linien haben, die zu ihnen laufen.

Ich habe eine plunk for you to look at erstellt, frage mich, ob jemand mir sagen kann, was das verursacht. Ich denke, beide der Probleme durch die pos Kennung in diesem Stück Code verursacht werden:

return function(t) { 
       var d2 = interpolate(t); 
       var pos = outerArc.centroid(d2); 
       pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1); 
       return [arc.centroid(d2), outerArc.centroid(d2), pos]; 
      };   

aber ich kann nicht finden, wie diese genau zu beheben.

EDIT1: Dank this question habe ich es geschafft, die Linien nur bis zum Rand des Kreises zu beheben. Dies hat mit der Reihenfolge der SVG-Zeichnung zu tun. Aktualisierte Plunkr: link. Das Problem mit dem Lichtbogen bleibt bestehen.

Answer 1

Die 'Bögen', die Sie gesehen haben, waren nur die Pfade von den Etiketten zu den Bögen. Um diesen gerade bearbeiten zu beheben, wo der Weg endet:

pos[0] = radius *1.2* (midAngle(d2) < Math.PI ? 1 : -1); 

Zuvor war die 1,2 0,95. Das löst dieses Problem.

Das andere Problem, das Sie hatten, war, dass Sie wollten, dass die Wege enden, wenn sie die Außenseite der Scheiben schlagen. Sie haben dies gelöst, indem Sie die Reihenfolge, in der die Pfade und Slices gezeichnet wurden, neu angeordnet haben. Aber jetzt wollen Sie eine mouseover, um die Deckkraft der Scheiben zu ändern. Offensichtlich können Sie jetzt, wenn Sie das tun, die dahinterliegenden Pfade sehen.

Um dies zu lösen, würde ich einen weißen Kreis zwischen die Pfade und die Scheiben legen, so dass Sie die Pfade nicht sehen. So, jetzt wäre die Reihenfolge:

Pfade> weißer Kreis> Scheiben

-Code Kreis hinzuzufügen:

Re Ordnung g Elemente:

svg.append("g") 
     .attr("class", "lines"); 

    svg.append("g") 
    .attr('class', 'circleBehind') 

    svg.append("g") 
     .attr("class", "slices"); 
    svg.append("g") 
    .attr("class", "labels"); 

Anfügen Kreis:

var circleBehind = svg.select('.circleBehind').append('circle') 
    .attr('r',radius * 0.95) 
    .attr('cx',0) 
    .attr('cy',0) 
    .style('fill','white') 

Dies ist wahrscheinlich der einfachste Weg, sonst würden Sie die Endpunkte der Pfade arbeiten, haben etc

Aktualisiert plnkr: http://plnkr.co/edit/53SvO9ym6euMAwGfIpcU?p=preview