Zentrieren von Text in einem Bogen mit d3

Question

Hier ist mein Anwendungsfall: Ich erstelle einen Sonnenstoß mit d3. Innerhalb jedes Knotens möchte ich den Text zentrieren. Es scheint nicht zu funktionieren. Ich habe versucht, hier die Methode erwähnt werden: d3js - how to add the text each of the arc's centre, after animation end? Aber es scheint nicht zu funktionieren: https://codepen.io/yonatankra/pen/awEYgR?editors=0010

Genauer gesagt:

var text = svg.selectAll(".node").append("text") 
.attr("text-anchor","middle") 
.attr("x", function(d) { 
    const middleRadius = d.y1 - d.y0; 
    arc = d3.arc().innerRadius(middleRadius - 1).outerRadius(middleRadius + 1); 
    const x = arc.centroid(d); 

    return x[0]*Math.cos(x[1]); 
}) 
.attr("y", function(d) { 
    const middleRadius = d.y1 - d.y0; 
    arc = d3.arc().innerRadius(middleRadius - 1).outerRadius(middleRadius + 1); 
    const x = arc.centroid(d); 

    return middleRadius*Math.sin(x[1]); 
}) 
/* .attr("dy", "-28") */ 
        // .attr("dx", "6") // margin 
        // .attr("dy", ".35em") // vertical-align 
         .text(function(d) { 
         return d.data.name 
       }) 

Ich habe auf verschiedene Weise versucht, und haben bereit mehrere Anleitungen, wie dies zu tun ist, aber nichts funktioniert wie erwartet.

Wie würden Sie den Code ändern, um den Text in der Mitte des Bogens einzugeben? Und eine weitere theoretische Frage - warum gibt das arc.centroid die gleichen Werte für verschiedene Bögen zurück?

Answer 1

var text = svg.selectAll(".node").append("text").attr("transform", function(d){ 
       let angle = ((d.startAngle + d.endAngle)/2); 
       let hyp = (d.depth * 50) + 25; 
       let x = Math.sin(angle) * hyp; 
       let y = Math.cos(angle) * hyp; 
       .attr("text-anchor", "middle") 
       .text(function(d) { 
         return d.data.name 
       }) 

Um die Mitte des Bogens zu finden, die Winkelhalbierende für den Bogen berechnen let angle = ((d.startAngle + d.endAngle)/2);

Die Hypotenuse current depth * 50 50 ist die (outer radius - inner radius)/2

sein Sobald wir die Hypotenuse und den Winkel dann x und Y-Positionen können mit dem Pythagoras-Theorem berechnet werden.

Legen Sie die Textankermitte so fest, dass sie in der Mitte des Bogens ausgerichtet ist.

-y wird anstelle von y verwendet, da der Graph nach oben zeigt (also -ve y-Skala)