我是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。我非常高兴能够添加标签和图例的任何建议。我希望标签位于小提琴的两个图表之上。
答案 0 :(得分:0)
这是你要找的吗? 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元素中减去文本长度,使其进一步向左定位。