dimple.js - 如何在 Dimple.js 圆环图或饼图上绘制标签？

Question

尝试在dimple.plot.pie

中的圆环图上正确显示百分比

这里有一些代码可以正常工作，但会将标签直接放在切片上。

无法让标签显示在饼图之外。

rings = chart.addSeries("series", dimple.plot.pie);
rings.afterDraw = function(shape, data) {
  var bbox, ctm;
  ctm = shape.getCTM();
  bbox = shape.getBBox();
  return this.chart.svg.append("text")
    .attr("x", ctm.e + bbox.x + bbox.width/2)
    .attr("y", ctm.f + bbox.y + bbox.height/2)
    .text(Math.round(1000*data.piePct)/10 + "%");;
};

这是我能做的最好的..

Answer 1

我想将它构建到 dimple 库中，但目前，这是我在自己的一个项目中使用的方法:

function getCentroid(data, plot) {
    var centerX = plot.x + plot.width / 2,
        centerY = plot.y + plot.height / 2,
        angle = (data.startAngle + (data.endAngle - data.startAngle) / 2),
        hyp = (data.innerRadius + (data.outerRadius - data.innerRadius) / 2),
        opp = Math.sin(angle) * hyp,
        adj = Math.cos(angle) * hyp;
    return [centerX + opp, centerY - adj];
}

series.afterDraw = function (shape, data) {
    var ctd = getCentroid(data, plotSize),
        s = d3.select(shape),
        degrees = ((data.startAngle + (data.endAngle - data.startAngle) / 2) * 180) / Math.PI;
    if (degrees < 180) {
        degrees -= 90;
    } else {
        degrees += 90;
    }
    if (Math.abs(data.startAngle - data.endAngle) > 0.1) {
        chart._group.append("text")
            .attr("transform", "rotate(" + degrees + ", " + ctd[0] + ", " +  ctd[1] + 4 + ")")
            .attr("dy", "0.35em")
            .attr("x", ctd[0])
            .attr("y", ctd[1])
            .style("text-anchor", "middle")
            .style("pointer-events", "none")
            .text(format(data.pValue));
    }
};

我直接从我自己的代码中获取它，因此它依赖于范围内的一些变量，但希望它们是不言自明的。