D3Js Exploding Pie Chart Part 1

    With one of my current projects I have been worked on creating a way for users to click on individual pieces of a pie chart and slight pull out that portion of the pie. It's a small and pointless feature, something I like to call eye candy in the frontend world.  For people some people it illustrates the content better. To be honest I found myself interesting for the UX. Its fun for me to recreate in d3js since the problem is challenging.

Problem
   This isn't a math problem but more of svg drawing problem, at the point where d3js draws out the pie chart there is some calculations to the index to see it out of order but if I can understand the method being used then I can modify it to include the exploding property.

var explode = function(x,index) {
  var offset = 80;
  var angle = (x.startAngle + x.endAngle) / 2;
  var xOff = Math.sin(angle)*offset;
  var yOff = -Math.cos(angle)*offset;
  return "translate("+xOff+","+yOff+")";
}

g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return color(d.data.age); })
    .attr("transform", explode);
Partial Solution
https://github.com/fassetar/blog-examples/blob/gh-pages/exploding-pie-d3


Popular posts from this blog

Nginx Best Practices Extended

Installing Windows on Acer chromebook 15 cb3-532

Entity Framework: ToListAynsc & WhereAsync