旋转饼图标签在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 + ')'; 
     }); 
}); 

对于我自己的娱乐，我也使用扇形片的开始和结束角度旋转标签。

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