Question

有人可以指导我使用任何资源制作爆炸饼图，点击d3.js，就像我们在kendo ui中有饼图一样。我不能使用kendo，因为我对Kendo UI无法满足非常具体的要求。我已经制作了包含所有必需功能的饼图，但是无法找到任何资源以使其在点击时爆炸。

提前致谢。

Answer 1

我强烈建议使用Michael Bostock's examples gallery（他是D3的作者）作为开发新D3可视化的起点。

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

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

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);

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

Answer 2

您可以使用基于D3的D3pie：http://d3pie.org/

用d3.js点击爆炸饼图

2 个答案: