Curved labels around pie chart

[Ninir]

I try to curve the labels around the pie by setting the .text() on append("textPath") . I get no error but the labels doesn't appear.

Here is a demo : jsFiddle

HTML :

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

JS :

  var myData = [{"label": "Label 1", "importance": 100, "color": "#ff0000"},
                {"label": "Label 2", "importance": 100, "color": "#ffd500"},
                {"label": "Label 3", "importance": 100, "color": "#00a6ff"},
                {"label": "Label 4", "importance": 100, "color": "#3c00ff"},
                {"label": "Label 5", "importance": 100, "color": "#00dc85"},
                {"label": "Label 6", "importance": 100, "color": "#6e6e6e"}
        ];

  var outlineColor = [ {"color": "#ff0000"} , 
                      {"color": "#ffd500"} , 
                      {"color": "#00a6ff"} , 
                      {"color": "#3c00ff"} , 
                      {"color": "#00dc85"} , 
                      {"color": "#6e6e6e"}
                     ];
  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" , 38)
                .attr("fill","rgba(138, 138, 138, 0.5)");
        var circle2 = canvas.append("circle")
                .attr("cx" , 330)
                .attr("cy" , 155)
                .attr("r" , 75)
                .attr("fill","rgba(138, 138, 138, 0.3)");
        var circle3 = canvas.append("circle")
                .attr("cx" , 330)
                .attr("cy" , 155)
                .attr("r" , 112)
                .attr("fill","rgba(138, 138, 138, 0.2)");
        /**Background - Circles**/





    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( null );

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

      arcs.append("text")
         .style("font-size", 20)
         .append("textPath")
         .text(function(d) { return d.data.label; })
         .attr("textLength", function(d, i) {
             return 90 - i * 5;
          })
         .attr("xlink:href", function(d, i) {
             return "#s" + i;
          });


  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




/** 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 **/

[Kai Chang]

I think the "xlink:href" attribute of the text needs to match an "id" attribute of the path it will curve along.

Here's an example with curved text: http://bl.ocks.org/syntagmatic/9eadf19bd2976653fa50

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ninir]

Thanks a lot for your help.

Here is the details : textPath

...