问如何解决错误：<text>属性transform=(NaN，NaN)在arc.centroid(d)上的无效值？
EN

Stack Overflow用户

提问于 2015-11-05 12:27:38

回答 1查看 742关注 0票数 0

我正试图在我的多行甜甜圈图表上添加文字。但是它在“翻译”行上返回无效的值错误。

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

    })

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-05 18:13:33

从代码中可以看出，你们在彼此的内部嵌套了3个饼图。对于每一种情况，您都需要保持对它所使用的弧形函数的引用。下面是我如何重构您的代码：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" 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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33544551

复制

相似问题

问如何解决错误：<text>属性transform=(NaN，NaN)在arc.centroid(d)上的无效值？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何解决错误：<text>属性transform=(NaN，NaN)在arc.centroid(d)上的无效值？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何解决错误：<text>属性transform=(NaN，NaN)在arc.centroid(d)上的无效值？
EN