在D3.js

Question

添加標籤三維餅圖

我試圖重新在這個例子中，三維餅圖：http://bl.ocks.org/NPashaP/9994181

這裏是我的版本：http://jsfiddle.net/26v6cc8x/1/

var salesData=[ 
    {label:"Basic", color:"#3366CC"}, 
    {label:"Plus", color:"#DC3912"}, 
    {label:"Lite", color:"#FF9900"}, 
    {label:"Elite", color:"#109618"}, 
    {label:"Delux", color:"#990099"} 
]; 

var svg = d3.select("body").append("svg").attr("width",700).attr("height",400); 

svg.append("g").attr("id","quotesDonut"); 

Donut3D.draw("quotesDonut", randomData(), 450, 150, 250, 150, 50, 0); 

function changeData(){ 
    Donut3D.transition("quotesDonut", randomData(), 250, 150, 50, 0); 
} 

function randomData(){ 
    return salesData.map(function(d){ 
     return {label:d.label, value:1000*Math.random(), color:d.color};}); 
} 

$(".btn-change").click(function(){ 
     changeData(); 
}); 

我的問題是，如何添加實際的數據標籤（而不是計算的百分比），並確保它們在轉換後保持正確的位置？含義我希望百分比和標籤都顯示出來。

任何幫助，非常感謝。謝謝！

Answer 1

在Donut3D.js更改以下功能：

function getPercent(d){ 
    return (d.endAngle-d.startAngle > 0.2 ? 
    Math.round(1000*(d.endAngle-d.startAngle)/(Math.PI * 2)) /10 + '%' : ''); 
} 

要這樣：

function getPercent(d) { 
    return (d.endAngle - d.startAngle > 0.2 ? 
    d.data.label + ': ' + Math.round(1000 * (d.endAngle - d.startAngle)/(Math.PI * 2))/10 + '%' : '');} 

這將前綴標籤的百分比值，顯示在圖中。

希望這會有所幫助！