d3-js>饼图中的质心问题

Question

我对 D3.js

相对较新

我正在尝试将legendLabel粘贴到饼图的每个弧切片的边缘。

我正在使用centroid(d,i)函数来实现这一目标。 问题是前2个标签角度完全不像其他角度那样“居中”，我无法弄清楚为什么......

感谢您抽出时间回复

这是一个显示我的问题的jsFiddle：http://jsfiddle.net/simouns/y7tq50o7/1/

HTML：

<div id="MyGraph"></div>

JS：

      var myData = [{"label": "Label not ok", "importance": 100, "color": "#FF5256"},
                {"label": "Label not ok", "importance": 100, "color": "#FF5256"},
                {"label": "Label ok", "importance": 100, "color": "#FF5256"},
                {"label": "Label ok", "importance": 100, "color": "#B9A031"},
                {"label": "Label ok", "importance": 100, "color": "#B9A031"},
                {"label": "Label ok", "importance": 100, "color": "#B9A031"},
                {"label": "Label ok", "importance": 100, "color": "#00566D"},
                {"label": "Label ok", "importance": 100, "color": "#00566D"},
                {"label": "Label ok", "importance": 100, "color": "#00566D"},
                {"label": "Label ok", "importance": 100, "color": "#73C5BF"},
                {"label": "Label ok", "importance": 100, "color": "#73C5BF"},
                {"label": "Label ok", "importance": 100, "color": "#73C5BF"},
                {"label": "Label ok", "importance": 100, "color": "#a74116"},
                {"label": "Label ok", "importance": 100, "color": "#a74116"},
                {"label": "Label ok", "importance": 100, "color": "#a74116"},
                {"label": "Label ok", "importance": 100, "color": "#86338F"},
                {"label": "Label ok", "importance": 100, "color": "#86338F"},
                {"label": "Label ok", "importance": 100, "color": "#86338F"}
        ];

  var outlineColor = [ {"color": "#FF5256"} , 
                      {"color": "#B9A031"} , 
                      {"color": "#00566D"} , 
                      {"color": "#73C5BF"} , 
                      {"color": "#CCCDCF"} , 
                      {"color": "#86338F"}
                     ];
      var angleColor = (Math.PI * 2) / 6 ; // calculate the radian angle applied to each slice





       /**Canvas**/
                    var nbElement = myData.length;
                    var angle = (Math.PI * 2) / nbElement ; // calculate the radian angle applied to each slice

                var width = 650;
                var height = 340;
                var r = 150;  //radius



                var canvas = d3.select("#MyGraph")
                        .append("svg") //create the SVG element inside the <MoodsGraph>
                    /*.data([myData]) */  //associate the data with the document // see var arcs !!!
                    .attr("height", height)
                    .attr("width", width);


            /**Canvas**/




            /**Background - Circles**/


        var circle1 = canvas.append("circle")
                .attr("cx" , 330)
                .attr("cy" , 155)
                .attr("r" , 30)
                .attr("fill","rgba(138, 138, 138, 0.5)");
        var circle2 = canvas.append("circle")
                .attr("cx" , 330)
                .attr("cy" , 155)
                .attr("r" , 60)
                .attr("fill","rgba(138, 138, 138, 0.3)");
        var circle3 = canvas.append("circle")
                .attr("cx" , 330)
                .attr("cy" , 155)
                .attr("r" , 120)
                .attr("fill","rgba(138, 138, 138, 0.2)");
        /**Background - Circles**/



        /** Pie Chart - Dash **/

    var group = canvas.append("g") //make a group to hold the pie chart
              .attr("transform","translate(330, 155)");



  var arc = d3.svg.arc()//  This will create <path> elements for us using arc data...
          .innerRadius(0)     
          .outerRadius(function (d,i) { return (d.data.importance*1.5); })
          .startAngle(function (d,i) { return (i*angle);})
          .endAngle(function (d,i) { return (i*angle)+(1*angle); });


  var pie = d3.layout.pie() //this will create arc data for us given a list of values
        .value(function (d) {/*console.log(d);*/ return d.importance; })  // Binding each value to the pie
        .sort( function(d) { return null; } );

  var arcs = group.selectAll(".slice")
        .data(pie(myData)) //associate the data with the pie
        .enter()
        .append("g")
        .attr("class", "slice");

  arcs.append("path")
      .attr("fill", function (d, i) {  return d.data.color; })
      .style("opacity", "0.5")
      .attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function



  arcs.append("text")
      .attr("transform", function(d,i) { //set the label's origin to the center of the arc
          var centered = arc.centroid(d,i); 
          return "translate(" + centered[0]*1.6 +","+ centered[1]*1.6 + ")rotate(" + setAngle(d) + ")"; 
          })
      .attr("text-anchor", "middle")
       .attr("dy", ".35em")
       .style("fill", "White")
       .style("font", "bold 12px Arial")
      .text(function(d) { return d.data.label; });


  // Computes the angle of an arc, converting from radians to degrees.
    function setAngle(d) {
      var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;

      return a > 90 ? a - 180 : a;
    }

/** Pie Chart - Dash **/



/** Inline - Dash **/
var inlines = d3.svg.arc()
        .innerRadius(0)
        .outerRadius(r)
        .startAngle(function (d,i) { return (i*angle); })
    .endAngle(function (d,i) { return (i*angle)+(1*angle); });

var outerPath = group.selectAll(".inlines")
      .data(pie(myData))
      .enter().append("path")
      .attr("stroke", "black")
      .attr("stroke-width", "2")
      .style("stroke-dasharray", ("6"))
      .attr("fill", "none")
      .attr("class", "inlines")
      .attr("d", inlines);  
/** Inline - Dash **/



/** Outline - Arc **/

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

var outerPath = group.selectAll(".outlineArc")
      .data(pie(outlineColor))
    .enter().append("path")
      .attr("stroke", function(d,i){ return d.data.color;})
      .attr("stroke-width", "3")
      .attr("fill", "none")
      .attr("class", "outlineArc")
      .attr("d", outlineArc);  



/** Outline - Arc **/