Dodawanie tekstu do centrum D3 Donut Graph

Question

Fiddle

próbuję wstawić zasadzie etykietę do środka wykresu pączka z wykorzystaniem D3. Udało mi się pracować z istniejącym kodem, który znalazłem i nim manipulować, aby wszystkie plasterki wykresu były w środku, aby wyglądały, jakby była tam etykieta, ale myślę, że lepiej byłoby po prostu dowiedzieć się, jak uczynić go bardziej stałym domem w centrum. Jestem bardzo nowy w JS i D3.

Każda pomoc jest doceniana.

Dziękuję

Obecnie jest to kod, który jest fałszowanie etykietę znajdującą się w środku.

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

Możesz znacznie uprościć swój kod. Ponieważ jesteś już centrowania wykres kołowy:

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

Można tylko dodać tekst w następujący sposób:

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

Zauważ, że skoro są tylko dodanie jednej <text>, nie trzeba powiązać dowolny dane do niego i może przekazać .text(...) wartość bezpośrednio, zamiast funkcji.