Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/87.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 将文本添加到D3圆环图的中心_Javascript_Html_Css_D3.js - Fatal编程技术网

Javascript 将文本添加到D3圆环图的中心

Javascript 将文本添加到D3圆环图的中心,javascript,html,css,d3.js,Javascript,Html,Css,D3.js,我试图使用D3将一个标签插入到甜甜圈图的中心。我能够用现有的代码找到并操作它,使图中的所有切片在中间看起来好像有标签,但我认为最好是弄清楚如何使它成为一个更持久的中心。我对JS和D3非常陌生 非常感谢您的帮助 多谢各位 这是当前正在伪造中心标签的代码 svg.selectAll("text").data(pie(data)).enter() .append("text") .attr("class","label1") .attr("transform", function(d) { va

我试图使用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(…)
值而不是函数。

Oooooh看看这个!非常感谢你。问题解决了。如果代码中有任何其他漏洞,请告诉我您是否可以!我会使用不同的图表库,d3js会让你写得更多。看看这个。请注意,对象已经具有表示处理图形时感兴趣的内容的属性:
center