Aggiunta di testo al centro di un D3 Donut grafico

Question

Fiddle

Sto cercando di inserire in fondo un'etichetta al centro di un grafico ciambella con D3. Sono stato in grado di lavorare con un codice esistente che ho trovato e manipolare in modo che tutte le sezioni della mesh del grafico nel mezzo appaiano come se ci fosse un'etichetta lì, ma penso che sarebbe un'idea migliore solo per capire come renderlo una casa più permanente nel centro. Sono molto nuovo a JS e D3.

Qualsiasi aiuto è apprezzato.

si

Grazie Questo è attualmente il codice che viene falsificato un'etichetta essendo nel centro.

svg.selectAll("text").data(pie(data)).enter() 
.append("text") 
.attr("class","label1") 
.attr("transform", function(d) { 
    var dist=radius-120; 
    var winkel=(d.startAngle+d.endAngle)/2; 
    var x=dist*Math.sin(winkel)-4; 
    var y=-dist*Math.cos(winkel)-4; 

    return "translate(" + x + "," + y + ")"; 
}) 

Answer 1

È possibile semplificare il codice un po '. Dal momento che si sta già centrando il grafico a torta:

var svg = d3.select("#svgContent").append("svg") 
    .attr("width",width) 
    .attr("height",height) 
    .append("g") 
    .attr("transform","translate("+width/2+","+height/2+")"); 

si può semplicemente aggiungere il testo come segue:

svg.append("text") 
    .attr("text-anchor", "middle") 
    .text("$" + totalValue); 

Nota che, dal momento che si sta solo aggiungendo una <text>, non c'è bisogno di associare qualsiasi dati ad esso, e può passare .text(...) un valore direttamente anziché una funzione.