在D3.js中为三维饼图添加标签

Adding labels to a 3D pie chart in D3.js

本文关键字：添加 加标签 三维 D3 js      更新时间：2023-09-26

我试图在本例中重新创建3D饼图：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();
 });

我的问题是，如何在饼图之外添加实际的数据标签（而不是计算的百分比），并确保它们在转换后保持正确的位置？这意味着我希望同时显示百分比和标签。

非常感谢您的帮助。谢谢

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

这将在标签前面加上图形中显示的百分比值。

希望这能有所帮助！

相关文章：