Question

我根据网络上的一些示例创建了一个多环甜甜圈图表，一切正常，直到我尝试将文本显示到环中并遇到不同的错误。我想在这一点上我可以访问数据，但是当我创建环时，我的路径和文本都有NaN值。

这是我的代码：

var dataset = {
  ringOne: [{"label":"70%", "value":70}, 
            {"label":"10%", "value":10}, 
            {"label":"20%", "value":20}],

  ringTwo: [{"label":"70%", "value":70}, 
            {"label":"10%", "value":10}, 
            {"label":"20%", "value":20}],
};


var width = 460,
    height = 300,
    cwidth = 45,
    outerR = 100,
    color = d3.scale.ordinal().range(["#07e", "#00aced", "#e32"]);

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

var arc = d3.svg.arc();

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

var rings = svgDonut.selectAll("g.slice")
    .data(pie([dataset]))
    .enter()
    .append("g")
    .attr("class", "slice");

    rings.append("path")
        .attr("fill", function(d, i){ return color(i); })
        .attr("d", function(d, i, j){ return arc.innerRadius( 80 + cwidth * j )
                                            .outerRadius( outerR * (j) )(d); });

    rings.append("text")
        .attr("transform", function(d) {                    
            d.innerRadius = 0;
            d.outerRadius = outerR;
            return "translate(" + arc.centroid(d) + ")";        
        })
        .attr("text-anchor", "middle")
        .text(function(d, i) { return dataset.ringOne[i].label; });

我得到的错误是：

Error: Invalid value for <path> attribute d="M4.898587196589413e-15,-80A80,80 0 1,1 NaN,NaNL0,0Z"
Error: Invalid value for <text> attribute transform="translate(NaN,NaN)"

在这里摆弄：https://jsfiddle.net/anaketa/8u7gejjc/

有什么想法吗？

d3圆环图表带文字的

0 个答案: