Javascript d3.js弧形心（d）：错误：无效的<；文本>；属性转换="；翻译（楠，楠）"；

我正在尝试使用D3中描述的centroid（）函数使圆弧标签居中

但是我在translate css属性上遇到了一个错误：

错误：属性的值无效 transform=“translate（NaN，NaN）”

中（d）个对象的console.log之一：

.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })

返回以下内容：

data: 80
endAngle: 1.9112350744272506
padAngle: 0
startAngle: 0
value: 80
__proto__: Object

这是我的密码：

HTML:

---

您需要将元素的索引传递到

质心

以及基准面：

    .attr("transform", function(d, i) { return "translate(" + arc.centroid(d, i) + ")"; })

---

在调用

arc.centroid

期间，D3调用为

outerRadius

、

startAngle

和

endAngle

创建的圆弧函数。但是，如果不将索引传递给

arc.centroid

，则D3没有可传递给arc函数的索引，所有函数都使用该索引。因此，质心计算以

NaN

s结束。

您需要将元素索引传递到

质心以及基准：

    .attr("transform", function(d, i) { return "translate(" + arc.centroid(d, i) + ")"; })

在调用
arc.centroid
期间，D3调用为
outerRadius
、
startAngle
和
endAngle
创建的圆弧函数。但是，如果不将索引传递给
arc.centroid
，则D3没有可传递给arc函数的索引，所有函数都使用该索引。因此，质心计算以
NaN
s结束。
传递给translate的参数不是数字。检查它。这就是为什么我在translate中使用arc.centroid（d）作为参数；返回当前基准（d）的中点坐标。传递给translate的参数不是数字。检查它。这就是为什么我在translate中使用arc.centroid（d）作为参数；返回当前基准（d）的中点坐标。您的解决方案运行良好。谢谢你的解释！很好的解决方案。谢谢您的解决方案非常有效。谢谢你的解释！很好的解决方案。谢谢
var myData = [80,65,12,34,72];
var nbElement = myData.length;
var angle = (Math.PI * 2) / nbElement ;
var myColors = ["#e7d90d", "#4fe70d", "#0de7e0", "#f00000", "#00DC85"];
var width = 1500;
var height = 1500;
var radius = 200;

var canvas = d3.select("#firstChart")
              .append("svg")
              .attr("height", height)
              .attr("width", width);

var group = canvas.append("g")
                .attr("transform","translate(310, 310)");

var arc = d3.svg.arc()
                .innerRadius(0)       
                .outerRadius(function (d,i) { return (myData[i]*2); })
                .startAngle(function (d,i) { return (i*angle); })
                .endAngle(function (d,i) { return (i*angle)+(1*angle); });

var pie = d3.layout.pie()
            .value(function (d) { return d; });

var arcs = group.selectAll(".arc")
            .data(pie(myData))
            .enter()
            .append("g")
            .attr("class", "arc");

arcs.append("path")
    .attr("d", arc)
    .attr("fill", function (d, i) { return ( myColors[i] ); });

arcs.append("text")
    .attr("transform", function(d) {console.log(d); return "translate(" + arc.centroid(d) + ")"; })
    .text(function(d) { return d.data; });

var outlineArc = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(radius)
        .startAngle(function (d,i) { return (i*angle); })
        .endAngle(function (d,i) { return (i*angle)+(1*angle); });

var outerPath = group.selectAll(".outlineArc")
      .data(pie(myData))
    .enter().append("path")
      .attr("fill", "none")
      .attr("stroke", "black")
      .attr("stroke-width", "2")
      .attr("class", "outlineArc")
      .attr("d", outlineArc);   

    .attr("transform", function(d, i) { return "translate(" + arc.centroid(d, i) + ")"; })