Добавления текста к центру D3 пончика Graph

Question

Fiddle

Я пытаюсь вставить в основном метку в центр бублика графа с использованием D3. Я смог работать с существующим кодом, который я нашел, и манипулировать им, чтобы все фрагменты сетки в середине отображались, как там есть ярлык, но я думаю, что было бы лучше понять, как сделайте его более постоянным домом в центре. Я очень новичок в JS и D3.

Любая помощь приветствуется.

Спасибо

Это в настоящее время код, который фальсифицирует метку, находящуюся в центре.

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

Вы можете немного упростить свой код. Так как вы уже центрирования круговой диаграммы:

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

Вы можете просто добавить текст следующим образом:

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

Обратите внимание, что, поскольку вы только добавление одного <text>, вам не нужно, чтобы связать любого данные к нему и могут передавать .text(...) значение непосредственно вместо функции.