Wie Sie ein Element davon abhalten, sich in zwei Pfade zu teilen

Question

Hier ist die codePen, an der ich gearbeitet habe. Es wird am besten sein, für den vollständigen Code darauf zu verweisen, den Post mit all dem nicht zu verwirren.

Ich habe ein Problem mit dem inneren Kreis (der graue Kreis innerhalb des Donuts, mit der Nummer 644 an der Spitze).

Problem ist, der innere Kreis wird in zwei Teile (zwei Pfade) aufgeteilt, und ich kann nicht herausfinden, warum (Sie können auch sehen, wo sich die beiden Teile treffen, wenn Sie nah genug schauen).

Ich habe versucht, zwei Variablen mit unterschiedlichen Daten zu erstellen, die ich dann in den inneren Kreis (innerPie) passierte - siehe Code unten.

Warum wird der Kreis in meinem Donut-Diagramm in zwei Teile getrennt? Wie kann ich nur einen ganzen Kreis machen?

// this is for the donut chart 
 
    var pie = d3.layout.pie() 
 
     .sort(null) 
 
     .value(function(d) { return d.region; }); 
 

 
    // new variable i created just for the inner circle 
 
    var innerPie = d3.layout.pie() 
 
     .sort(null) 
 
     .value(function(d) { return d.toursCreated; }); 
 

 
    // the creation of the inner circle 
 
    var innerG = svg.selectAll(".innerArc") 
 
     .data(pie(data)) 
 
     .enter().append("g") 
 
     .attr("class", "innerArc"); 
 

 
    innerG.append("path") 
 
    .attr("d", innerArc) 
 
    .style("fill", "grey");

Answer 1

Sie versuchen, die gleichen Daten zu verwenden, die die äußeren Bögen erzeugt einen vollen Kreis zu erzeugen. Da Kreis (Daten) zwei Objekte sind, erstellen Sie zwei g.innerArc-Elemente und setzen sie einfach so, dass sie die gleiche Farbe haben, d. H. Grau, aber das Kantenproblem wird nicht gelöst, daher sieht es etwas aus. Ein Hack wäre, den Strich für beide Pfadelemente einfach grau zu machen.

Es scheint mir jedoch, dass die einfachste Sache ist, nur einen Kreis zu zeichnen. Es scheint unnötig, ein Kreisdiagramm-Layout zu verwenden, um einen Kreis zu erstellen, wenn das Kreiselement bereits existiert.

var innerG = svg.append("g") 
     .attr("class", "innerArc") 
     .append("circle") 
     .attr("r", 40) 
     .style("fill", "grey");