Problem with curved text around D3.js pie chart
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I've attached a test html file. I'm trying to get curved text labels on each of the lobes (or petals) of the chart. If this can be done as part of each lobe, that's great. However, I'd settle for just a curved text circle as I have here but surrounding the pie chart. I'm struggling with the positioning.

I was hoping to get something like this:

    >       <!DOCTYPE html>
    >       <html>
    >         <head>
    >           <meta charset="utf-8">
    >           <title>No. Of Victims</title>
    >           <style>
    >       </style>
    >       <body>
    >       <script src=""></script>
    >       <div id = "svgContent"></div>

    >       <script>
    >         var data = [{label:"BC", value:50},{label:"Alberta", value:20},{label:"Manitoba",value:100},{label:"Saskatchewan", value:80},{label:"ONTARIO", value:20}];

    >         var margin = {top:40,left:40,right:40,bottom:40};
    >         width = 300;
    >         height = 300;
    >         radius = Math.min(width-100,height-100)/2;
    >         var color = d3.scale.category10().range(["#e8af92", "#a9e892"]);
    >         var arc = d3.svg.arc()  
    >           .outerRadius(radius -230)
    >           .innerRadius(radius - 50)
    >           .cornerRadius(20);
    >         var arcOver = d3.svg.arc()
    >         .outerRadius(radius +50)
    >         .innerRadius(0);

    >         var a=width/2 - 20;
    >         var b=height/2 - 90;
    >         var svg ="#svgContent").append("svg")
    >           .attr("viewBox", "0 0 " + width + " " + height/2)
    >           .attr("preserveAspectRatio", "xMidYMid meet")
    >           .append("g")
    >           .attr("transform","translate("+a+","+b+")");

    >         //div ="body")

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

    >         var g = svg.selectAll(".arc")
    >           .data(pie(data))
    >           .enter()
    >         g.append("path")
    >           .attr("d",arc)
    >           .style("fill",function(d){return color(;})
    >           .attr("d", arc);;
    >         var delta = (2*Math.PI)/5;
    >         var arc = d3.svg.arc()
    >           .innerRadius(140)
    >           .outerRadius(140)
    >           .startAngle(function(d,i){return (5-i)*delta;})
    >           .endAngle(function(d,i){return (5-i+1)*delta;});

    >            var svg ="body").append("svg")
    >           .attr("width", 960)
    >           .attr("height", 500)
    >           .selectAll("g")
    >           .data(data)
    >           .enter()
    >           .append("g")
    >           .attr("transform", "translate(480,250)");

    >         var thing = svg.append("g")
    >           .attr("id","thing")
    >           .style("fill","navy")
    >           .attr("class", "label");

    >         var arcs = svg.append("path")
    >           .attr("id", function(d,i){return "s"+i;})
    >           .attr("d",arc);

    >         thing.append("text")
    >           .style("font-size",12)
    >           .style("text-anchor","middle")
    >           .append("textPath")
    >           .attr("textLength",function(d,i){return d.label.length *12 ;})
    >           .attr("xlink:href",function(d,i){return "#s"+i;})
    >           .attr("startOffset",function(d,i){return "240";})
    >         //  .attr("dy","em")
    >           .text(function(d){return d.label.toUpperCase();})

    >       </script>

    >       </body>
    >       </html>
can you provide the full files? i tried with <script src=""></script> but i got an error, that 'category10' is undefined .
Chlegou over 2 years ago
are you looking for something like that?
Chlegou over 2 years ago
I hope the dropbox link above works to let you see the example. Pasting in the html garbled things a bit. The example you pointed to is sort of what I'm looking to do. Ideally I'd like to wrap the text around the outside ends of each of the "petals" on the inverted pie chart.
billsouthworth over 2 years ago
due to titles length and chart haven't a constant width, it can't be on it.
Chlegou over 2 years ago
My preference is to wrap the word around the end or the appropriate "petal". For example, "Saskatchewan" would wrap just around the outside of the green lobe it's next to.
billsouthworth over 2 years ago
I don't follow your last comment. Please remember that this is a test file. In the actual application, I'll be able to have shorter text. I don't think I can attach a sketch here or I could show what I mean more easily. If there are constraints that won't allow me to wrap around a "petal" individually, then I'll have to setle for the ring of text around the whole thing, but I'd still prefer the text to just wrap individuallly around each leaf/petal/inverted pie slice.
billsouthworth over 2 years ago
it's adjusted exactly, for equal values. but for different values, it's messed a little bit
Chlegou over 2 years ago
I was hoping to get something like this:
billsouthworth over 2 years ago
ah so i was getting it wrong. ok i will see about it, if got something i will tell
Chlegou over 2 years ago
awarded to farolanf

Crowdsource coding tasks.

1 Solution

Winning solution
Great. Exactly what I was looking for. Thanks.
billsouthworth over 2 years ago