与d3.js点击的爆炸饼图 [英] Exploded Pie Chart on click with d3.js

问题描述

有人可以指导我到任何资源，使爆炸饼图点击与d3.js，就像我们有kendo ui中的饼图。我不能使用kendo，因为我有非常具体的要求，Kendo UI不能满足。我已经使我的饼图与所有必需的功能，但不能真正找到任何资源，使其爆炸点击。

提前感谢。

解决方案

我强烈建议您使用 Michael Bostock的示例库（他是D3的作者）作为开发新的D3可视化的起点。 p>

例如。使用以下代码示例： http://bl.ocks.org/mbostock/3887235 。 / p>

编辑：要添加爆炸，您只需要对每个细分应用一点翻译。

  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; 
 returntranslate（+ xOff +，+ yOff +）; 
} 
 
 g.append（path）
 .attr（d，arc）
 .style（fill，function return color（d.data.age）;}）
 .attr（transform，explode）; 
  

在JsFiddle中查看： http://jsfiddle.net/zephod/L4pyk79e/2/

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.

解决方案

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/

这篇关于与d3.js点击的爆炸饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！