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: https://www.dropbox.com/s/h9id4aziakr40cp/example.png?dl=0

    >       <!DOCTYPE html>
    >       <html>
    >         <head>
    >           <meta charset="utf-8">
    >           <title>No. Of Victims</title>
    >           <style>
    >       </style>
    >       <body>
    >       <script src="http://d3js.org/d3.v3.min.js"></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 = d3.select("#svgContent").append("svg")
    >           .attr("viewBox", "0 0 " + width + " " + height/2)
    >           .attr("preserveAspectRatio", "xMidYMid meet")
    >           .append("g")
    >           .attr("transform","translate("+a+","+b+")");

    >         //div = d3.select("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(d.data.value);})
    >           .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 = d3.select("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="https://d3js.org/d3.v4.min.js"></script> but i got an error, that 'category10' is undefined .
Chlegou 7 months ago
are you looking for something like that? https://bl.ocks.org/mbostock/raw/6fead6d1378d6df5ae77bb6a719afcb2/
Chlegou 7 months 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 7 months ago
due to titles length and chart haven't a constant width, it can't be on it.
Chlegou 7 months 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 7 months 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 7 months ago
it's adjusted exactly, for equal values. but for different values, it's messed a little bit
Chlegou 7 months ago
I was hoping to get something like this: https://www.dropbox.com/s/h9id4aziakr40cp/example.png?dl=0
billsouthworth 7 months ago
ah so i was getting it wrong. ok i will see about it, if got something i will tell
Chlegou 7 months ago
awarded to farolanf
Tags
d3js
d3-js

Crowdsource coding tasks.

1 Solution

Winning solution
Great. Exactly what I was looking for. Thanks.
billsouthworth 7 months ago