The problem is that you're replacing the transform
attribute for these elements, which is currently used to "translate" the labels in position.(问题是您要替换这些元素的transform
属性,该属性当前用于“翻译”适当位置的标签。)
Since it's hard to dig into the calculations used here, I think the best approach is to pull the existing transform attribute and modify it, like this:(由于很难深入研究此处使用的计算,我认为最好的方法是提取现有的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 + ')';
});
});
For my own entertainment, I've also rotated the labels using the start and end angles of the pie slices.(作为我自己的娱乐,我还使用饼图的开始和结束角度旋转了标签。)
It's unfortunate you can't do this as a pretransition event and avoid the "jump".(不幸的是,您不能将其作为过渡前的事件来避免“跳跃”。) It will just get overwritten by the animations.(它将被动画覆盖。) Doing this properly would require some changes to dc.js - file an issue if you're interested.(正确执行此操作将需要对dc.js进行一些更改-如果您有兴趣,请提交问题 。) 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…