Centroid issue in a pie chart

[Ninir]

I'm relatively new to D3.js. I have learned a lot just by reading the posts of this group.

I'm trying to stick a legendLabel to the edge of each arc slice of my Pie Chart as shown on this picture : 

I'm using the centroid(d,i)  function to achieve that. 

The issue is that the first 2 labels angle are totally not "centered" like the others, and I cant figure out why...

 

Thanks for taking the time to reply

Here is a jsFiddle that shows my issue : http://jsfiddle.net/simouns/y7tq50o7/1/

      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

              d.outerRadius = 300;

              d.innerRadius = 150;

              d.value = 300;

              console.log(d);

              return "translate(" + arc.centroid(d,i)  + ")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 **/

[Ninir]

Edit :     

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

[Ninir]

The issue was : 

.sort( function(d) { return null; } );

The resolution : 

.sort(null);

Thanks to : http://stackoverflow.com/questions/32184667/d3-js-centroid-issue-in-a-pie-chart/32186504#32186504

Regards, 

Mounir