如何解决错误：arc.centroid（d）上的<text>属性transform =“translate（NaN，NaN）”的值无效？

我试图在我的多行甜甜圈图表上追加文本。但是它会在“translate”行上返回无效值错误。如何解决错误：arc.centroid（d）上的<text>属性transform =“translate（NaN，NaN）”的值无效？

gs 
    .append("text") 
    .attr("class", "pieNum")  
    .attr("transform", function(d, i, j){ 
     console.log(d, i, j); 
     return "translate(" + arc.centroid(d[i]) + ")" 
    }) 
    .text(function(d, i){ 
     console.log(d); 
     return d.value 
    })

我发现这是因为在function(d, i, j)，d得到阵列数据，而不是字符串或浮动。

，因为我的数据看起来像

nextYear thisYear preYear 
11118  10683  10892 
28201  27358  28537 
1473  1398  1399 
0   0   1

所以像["11118", "28201", "1473", "0"]数据是d，我试图在数组中使用数字，但保留失败。

这里是我的代码：

d3.csv(filename, function(error,data){ 


    var dataOuter = [], dataMid = [], dataInner = []; 
    var dataset = { 
      dataOuter, 
      dataMid, 
      dataInner, 

     }; 
     var svgEle = document.getElementById("chart") 
     var width = window.getComputedStyle(svgEle, null).getPropertyValue("width") 
      height = window.getComputedStyle(svgEle, null).getPropertyValue("height") 
      cwidth = 50; 

     width = parseFloat(width) // remove px 
     height = parseFloat(height) // remove px  

for (var i = 0; i < data.length; i++){ 
dataset.dataOuter.push(data[i].nextYear) 
dataset.dataMid.push(data[i].thisYear) 
dataset.dataInner.push(data[i].preYear) 
    } 

     var color = d3.scale.category10(); 

     var pie = d3.layout.pie() 
      .sort(null); 

     var arc = d3.svg.arc(); 

     var svg = d3.select("#chart").append("svg") 
      .attr("width", width) 
      .attr("height", height) 
      .append("g") 
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

     var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g"); 
     var path = gs.selectAll("path") 
      .data(function (d) { return pie(d); }) 
      .enter().append("path") 
      .attr("fill", function (d, i) { return color(i); }) 
      .attr("d", function (d, i, j) { return arc.innerRadius(10 + cwidth * j).outerRadius(cwidth * (j + 1))(d); }); 

    gs 
     .append("text") 
     .attr("class", "pieNum")  
     .attr("transform", function(d, i, j){ 
     console.log(d, i, j); 
     return "translate(" + arc.centroid(d[i]) + ")" 
      }) 
     .text(function(d, i){ 
    console.log(d); 
      return d.value 
      }) 

    })

来源

2015-11-05 Hyunsung Kim

你见过[这个例子]（http://bl.ocks.org/Guerino1/2295263）？ –

@LarsKotthoff不，我刚刚看到它。谢谢！ –

从代码它看起来像你嵌套彼此的内部3个饼图。对于每一个，你都需要保留一个对它正在使用的弧函数的引用。以下是我会调整你的代码：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="chart" style="width: 600px; height: 600px"></div> 
 
    <script> 
 
     // input data 
 
     var data = [{"nextYear":"11118","thisYear":"10683","preYear":"10892"},{"nextYear":"28201","thisYear":"27358","preYear":"28537"},{"nextYear":"1473","thisYear":"1398","preYear":"1399"},{"nextYear":"0","thisYear":"0","preYear":"1"}]; 
 

 
     var dataOuter = [], 
 
     dataMid = [], 
 
     dataInner = []; 
 
     
 
     // make this array of arrays 
 
     var dataset = [ 
 
     dataOuter, 
 
     dataMid, 
 
     dataInner, 
 
     ]; 
 

 
     var svgEle = document.getElementById("chart") 
 
     var width = window.getComputedStyle(svgEle, null).getPropertyValue("width") 
 
     height = window.getComputedStyle(svgEle, null).getPropertyValue("height") 
 
     cwidth = 50; 
 

 
     width = parseFloat(width) // remove px 
 
     height = parseFloat(height) // remove px  
 
    
 
     // again, array of arrays for data-binding 
 
     for (var i = 0; i < data.length; i++) { 
 
     dataset[0].push(+data[i].nextYear); 
 
     dataset[1].push(+data[i].thisYear); 
 
     dataset[2].push(+data[i].preYear); 
 
     } 
 

 
     var color = d3.scale.category10(); 
 

 
     var pie = d3.layout.pie() 
 
     .sort(null); 
 
    
 
     // pre-make all the arcs you'll need 
 
     var arcs = [ 
 
     d3.svg.arc() 
 
      .innerRadius(0) 
 
      .outerRadius(50), 
 
     d3.svg.arc() 
 
      .innerRadius(60) 
 
      .outerRadius(110), 
 
     d3.svg.arc() 
 
      .innerRadius(120) 
 
      .outerRadius(170)]; 
 

 
     var svg = d3.select("#chart").append("svg") 
 
     .attr("width", width) 
 
     .attr("height", height) 
 
     .append("g") 
 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 
 

 
     // g for each pie 
 
     var pies = svg.selectAll(".pie") 
 
     .data(dataset) 
 
     .enter().append("g") 
 
     .attr("class", "pie"); 
 

 
     // pie up the data, add a g for each slice (arc + text) 
 
     var slices = pies.selectAll(".slice") 
 
     .data(function(d) { 
 
      return pie(d); 
 
     }) 
 
     .enter() 
 
     .append("g") 
 
     .attr("class","slice"); 
 
     
 
     // add our paths with our arcs 
 
     slices 
 
     .append("path") 
 
     .attr("fill", function(d, i, j) { 
 
      return color(i); 
 
     }) 
 
     .attr("d", function(d, i, j) { 
 
      return arcs[j](d); 
 
     }); 
 
    
 
     // add our text 
 
     slices 
 
     .append("text") 
 
     .attr("class", "pieNum") 
 
     .attr("transform", function(d, i, j) { 
 
      return "translate(" + arcs[j].centroid(d) + ")" 
 
     }) 
 
     .text(function(d, i) { 
 
      return d.value 
 
     }) 
 

 
    // }) 
 
    </script> 
 
</body> 
 

 
</html>

来源

2015-11-05 18:13:33 Mark

它刚刚解决了我的问题。非常感谢！ –

如何解决错误：arc.centroid（d）上的<text>属性transform =“translate（NaN，NaN）”的值无效？

回答

相关问题