CODEWITHSUNDEEP
javascriptd3.jslabel
Yoeri
Yoeri

Reputation: 111

Implementing Pie Chart labels as used by David Bueza

I'm trying to implement David Bueza's Pie chart labels in a pie chart of my own. I've tried adapting the used code to my needs and succeeded so far. Yet something interesting occurs. The one thing is that my lines start at the outside of the pie chart, and the other is that two of the labels have weird arcs in the lines running to them.

I've created a plunk for you to look at, I'm wondering if anyone can tell me what's causing this. I think both of the issues are caused by the pos identifier in this bit of code:

return function(t) {
                var d2 = interpolate(t);
                var pos = outerArc.centroid(d2);
                pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1);
                return [arc.centroid(d2), outerArc.centroid(d2), pos];
            };

but I can't find how to fix this exactly.

EDIT1: Thanks to this question I've managed to fix the lines only reaching to the edge of the circle. This had to do with the order of drawing of the SVGs. Updated Plunkr: link. The problem with the arc stil persists.

Upvotes: 0

Views: 53

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

The 'arcs' you were seeing were just the paths from the labels to the arcs. To fix this just edit where the path ends :

pos[0] = radius *1.2* (midAngle(d2) < Math.PI ? 1 : -1);

Previously the 1.2 was 0.95. That solves that problem.

The other problem you had, was you wanted the paths to end when they hit the outside of the slices. You solved this by rearranging the order in which the paths and slices were drawn, great. But you now want a mouseover to change the opacity of the slices. Now obviously when you do this you can now see the paths behind.

To solve this, I would put a white circle in between the paths and the slices so you dont see the paths. So now the order would be :

paths > white circle > slices

Code to add circle :

Re order g elements : 

svg.append("g")
        .attr("class", "lines");

    svg.append("g")
    .attr('class', 'circleBehind')

  svg.append("g")
      .attr("class", "slices");
  svg.append("g")
    .attr("class", "labels");

Append circle : 

var circleBehind = svg.select('.circleBehind').append('circle')
    .attr('r',radius * 0.95)
    .attr('cx',0)
    .attr('cy',0)
    .style('fill','white')

This is probably the easiest way, otherwise you would have to work out the end points of the paths etc

Updated plnkr : http://plnkr.co/edit/53SvO9ym6euMAwGfIpcU?p=preview

Upvotes: 1

Related Questions