javascript - 在 dc.js 饼图中旋转饼图标签

Question

假设我在 dc.js 中有以下代码来创建饼图:

var chart = dc.pieChart("#test");
d3.csv("morley.csv", function(error, experiments) {
  var ndx           = crossfilter(experiments),
      runDimension  = ndx.dimension(function(d) {return "run-"+d.Run;})
      speedSumGroup = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;});
  chart
    .width(768)
    .height(480)
    .slicesCap(4)
    .innerRadius(100)
    .dimension(runDimension)
    .group(speedSumGroup)
    .legend(dc.legend())
    // workaround for #703: not enough data is accessible through .label() to display percentages
    .on('pretransition', function(chart) {
        chart.selectAll('text.pie-slice').text(function(d) {
            return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
        })
    });
  chart.render();
});

我想做的是旋转标签，但当我这样做时，所有标签都会平移到饼图的中心。

chart.renderlet(function (chart) {
    chart.selectAll('text.pie-slice')
    .attr('transform', 'rotate(315)');
});

有没有办法在不改变标签在图表上的位置的情况下旋转标签？

Answer 1

问题是您要替换这些元素的 transform 属性，该属性当前用于“翻译”位置上的标签。

由于很难深入研究这里使用的计算，我认为最好的方法是提取现有的转换属性并对其进行修改，如下所示:

chart.on('renderlet', function (chart) {
    chart.selectAll('text.pie-slice')
        .attr('transform', function(d) {
            var translate = d3.select(this).attr('transform');
            var ang = ((d.startAngle + d.endAngle) / 2 * 180 / Math.PI)%360;
            if(ang<180) ang -= 90; else ang += 90;
            return translate + ' rotate(' + ang + ')';
        });
});

为了娱乐，我还使用饼图切片的开始和结束 Angular 旋转了标签。

不幸的是，您不能将此作为过渡前事件来避免“跳跃”。它只会被动画覆盖。正确执行此操作需要对 dc.js 进行一些更改 - file an issue如果你有兴趣。