[英]Adding labels to a 3D pie chart in D3.js
I'm trying to recreate the 3D pie chart in this example: http://bl.ocks.org/NPashaP/9994181 在此示例中,我尝试重新创建3D饼图: http : //bl.ocks.org/NPashaP/9994181
Here's my version: http://jsfiddle.net/26v6cc8x/1/ 这是我的版本: 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();
});
My question is, how do I add the actual data labels (not the calculated percentages) outside the pie and make sure they keep their correct position after transition? 我的问题是,如何在饼图外添加实际的数据标签(而不是计算的百分比),并确保过渡后它们保持正确的位置? Meaning I want both percentages and labels to show up. 意思是我要同时显示百分比和标签。
Any help is greatly appreciated. 任何帮助是极大的赞赏。 Thanks! 谢谢!
In the Donut3D.js change the following function: 在Donut3D.js中更改以下功能:
function getPercent(d){
return (d.endAngle-d.startAngle > 0.2 ?
Math.round(1000*(d.endAngle-d.startAngle) / (Math.PI * 2)) /10 + '%' : '');
}
To this: 对此:
function getPercent(d) {
return (d.endAngle - d.startAngle > 0.2 ?
d.data.label + ': ' + Math.round(1000 * (d.endAngle - d.startAngle) / (Math.PI * 2)) / 10 + '%' : '');}
This will prefix the label to the percentage value that shows in the graph. 这会将标签添加到图形中显示的百分比值的前缀。
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.