在基本图表上添加图例

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.

本质上，它的作用是附加一个文本元素，该元素使用路径元素的角度定位。

var angle = d.endAngle - d.startAngle;
var loc = d.startAngle - (Math.PI/2) + (angle/2);
return Math.sin(loc) * radius;

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

var textLength = [];
gEnter.selectAll("text").each(function () {
    textLength.push(this.getComputedTextLength());
});

要获取文本对象的长度，那么当d.startAngle 大于PI（即在图表的左侧）时，您可以修改.attr("x", ...) 或.attr("transform", "translate(x,0)")，减去文本长度从 x 元素到更左的位置。