d3.js arc.centroid（d）：錯誤：無效值爲<text>屬性transform =「translate（NaN，NaN）」

Question

我試圖將弧標籤與質心（）函數D3 documentation。

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

，但我對翻譯的CSS屬性得到一個錯誤：

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

返回此：

Error: Invalid value for attribute transform="translate(NaN,NaN)"

的（d）的執行console.log之一對象：

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

這是我的代碼：

HTML：

<div id="firstChart"></div> 

JS：

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); 

Answer 1

您需要的元素的索引傳遞給centroid以及基準：

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

在通話過程中，以arc.centroid，D3調用您爲outerRadius創建的弧函數，startAngle和endAngle。但是，如果您未將索引傳遞給arc.centroid，則D3沒有索引傳遞給弧函數，所有這些函數都使用該索引。因此質心計算結果爲NaNs。