Question

我是d3.js和stackoverflow的新手，所以请原谅我问一些非常基本的东西。我有一个基本的圆环图，但它是一个正常的圆环图的修改，因为你可以看到有一个在另一个之上。我想知道是否可以在图表上添加标签。我可以在图表外添加图例和标签，但我希望能够在图表上添加标签。

这是图表的代码

var dataset = {
  data1: [53245, 28479, 19697, 24037, 40245],
  data2: [53245, 28479, 19697, 24037, 40245]
};

var width = 460,
    height = 300,
    cwidth = 45;

var color = d3.scale.category20();

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(10+cwidth*j).outerRadius(cwidth*(j+1))(d); });

这是FIDDLE。我非常高兴能够添加标签和图例的任何建议。我希望标签位于小提琴的两个图表之上。

Answer 1

这是你要找的吗？ Fiddle

基本上它的作用是追加一个使用path元素的角度定位的文本元素。

void SendTrap(int atcsfield)
{
    /* TIdSnmp *snmp = new TIdSNMP(0); */
    snmp->Trap->Clear();
    snmp->Trap->Version = 2;
    snmp->Trap->Community=String(cfg.snmp.community);
    snmp->Trap->TimeTicks = GetTickCount() - InitialTickCount;
    snmp->Trap->Enterprise=String(cfg.snmp.oid);
    snmp->Trap->GenTrap=6;
    snmp->Trap->SpecTrap=1;
    for(int i=0;i<MAX_VARBINDS;i++)
    {
        if(svb[i].Length())
        {
            varb.sprintf("%s.1.%d",BaseOID.c_str(),i);
            snmp->Trap->MIBAdd(varb,svb[i], ASN1_OCTSTR);
        }
    }
    for(int i=0;i<MAX_VARBINDS;i++)
    {
        if(ivb[i]!=-1)
        {
            varb.sprintf("%s.1.%d",BaseOID.c_str(),i);
            snmp->Trap->MIBAdd(varb, ivb[i], ASN1_INT);
        }
    }
    snmp->Host = ManagerIpList->Strings[j];
    snmp->SendTrap();
}

如果您希望左侧的标签不与图表重叠，您可以使用类似于以下内容的内容

byte b = 10;
b = (byte) (b * b);

要获取文本对象的长度，您可以在var angle = d.endAngle - d.startAngle; var loc = d.startAngle - (Math.PI/2) + (angle/2); return Math.sin(loc) * radius;大于PI时修改var textLength = []; gEnter.selectAll("text").each(function () { textLength.push(this.getComputedTextLength()); });或.attr("x", ...)（意味着它位于图表的左侧）），从x元素中减去文本长度，使其进一步向左定位。

在基本图表上添加图例

1 个答案: