在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 + '%' : '');} 

这将前缀标签的百分比值，显示在图中。

希望这会有所帮助！