用d3.js點擊爆炸餅圖

有人可以指示我使用任何資源來製作爆炸餅圖，點擊d3.js，就像我們在kendo ui中有餅圖一樣。我不能使用劍道，因爲我有Kendo UI無法實現的非常具體的要求。我製作了具有所有必需功能的餅圖，但無法真正找到任何資源使其在點擊時爆炸。用d3.js點擊爆炸餅圖

在此先感謝。

來源

2014-11-23 noctni8

我強烈建議開發新的可視化D3使用時Michael Bostock's examples gallery（他是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/

來源

2014-11-23 14:05:33

邁克的畫廊沒有爆炸餅圖的例子。我的d3排行榜的起點是他的畫廊。我已經對現有示例進行了很多定製改進以滿足我的需求，但我確實在爲爆炸派努力奮鬥 – noctni8 2014-11-23 14:37:24

已更新，需要進行調整。 – 2014-11-23 14:57:33

謝謝你的隊友....你救了我的一天 – noctni8 2014-11-23 15:01:28

你可以使用D3pie它是基於D3：http://d3pie.org/

來源

2014-11-23 14:00:12 iH8

謝謝....我會盡量this..but我可以添加自定義功能，以圖表，如果我使用這個庫？ – noctni8 2014-11-23 14:38:58

這取決於你想要完成的課程，你只提到「爆炸」。但它具有點擊，鼠標懸停和鼠標移出事件的回調功能，因此您可以將自己的行爲附加到這些事件上。 – iH8 2014-11-23 14:45:27

用d3.js點擊爆炸餅圖

回答

相關問題