Разбитая круговая диаграмма по щелчку с d3.js

Question

Может ли кто-нибудь направить меня на любой ресурс, чтобы взорвать круговую диаграмму при щелчке с d3.js, точно так же, как у нас есть круговые диаграммы в кендо ui. Я не могу использовать кендо, поскольку у меня есть очень специфические требования, которые пользовательский интерфейс Kendo не может выполнить. Я сделал свою круговую диаграмму со всеми необходимыми функциями, но не могу найти какой-либо ресурс, чтобы он взорвался при щелчке.

Заранее спасибо.

Answer 1

Я настоятельно рекомендую использовать Michael Bostock's examples gallery (он является автором D3) в качестве отправной точки при разработке новой визуализации D3.

Например. Используйте образец кода от: 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

Вы можете использовать D3pie, который основан на D3: http://d3pie.org/