CODEWITHSUNDEEP
javascriptd3.jspie-chart
Pragyan
Pragyan

Reputation: 146

Exploded Pie Chart on click with d3.js

Can someone direct me to any resource to make exploded pie chart on click with d3.js just like we have the pie charts in kendo ui. I can't use kendo as I have very specific requirements that Kendo UI can't fulfill. I have made my pie chart with all the required functionality but can't really find any resource to make it explode on click.

Thanks in advance.

Upvotes: 1

Views: 5232

Answers (2)

Tom Rees
Tom Rees

Reputation: 671

I strongly recommend using Michael Bostock's examples gallery (he is the author of D3) as a starting point when developing a new D3 visualisation.

Eg. Use the code sample from: http://bl.ocks.org/mbostock/3887235.

Edit: To add the "explosion" you just need a little translation applied to each segment.

var explode = function(x,index) {
  var offset = (index==5) ? 80 : 0;
  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);

See it in a JsFiddle: http://jsfiddle.net/zephod/L4pyk79e/2/

Upvotes: 2

iH8
iH8

Reputation: 28688

You could use D3pie which is based on D3: http://d3pie.org/

Upvotes: 0

Related Questions