将文本添加到 D3 甜甜圈图的中心

Question

我正在尝试使用 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(...)一个值而不是函数。

将文本添加到 D3 甜甜圈图的中心

Adding text to the center of a D3 Donut Graph

html

javascript

css

d3.js