我正在尝试使用 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 + ")";
})
最佳答案
您可以大大简化您的代码。由于您已经将饼图居中:
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>
,不需要绑定(bind)任何数据,可以传.text(...)
一个值而不是一个函数。
关于javascript - 将文本添加到 D3 donut chart 的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28097184/