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 属性，这些元素目前用于“转换”标签的位置。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

  chart.on（'renderlet'，function（chart）{＆＃xA; chart.selectAll（'text.pie-slice'）＆＃xA; .attr（'transform'，function（d）{＆＃xA; var translate = d3.select（this）.attr（'transform'）;＆＃xA; var ang =（（d.startAngle + d.endAngle）/ 2 * 180 / Math.PI）％360;＆＃xA; if（ang <180）ang  -  = 90;否则ang + = 90;＆＃xA; return translate +'rotate（'+ ang +'）';＆＃xA;}）;＆＃xA;}）;＆ #xA;

＆＃xA;＆＃xA;

为了我自己的娱乐，我还使用饼图片的开始和结束角度旋转标签。

＆ #xA;＆＃xA;

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

＆＃xA;

Answer 2

除了戈登的答案外，所有饼图都具有此功能；我更改了dc.js中的labelPosition函数。

return 'translate(' + centroid + ')';

到

var ang = ((d.startAngle + d.endAngle) / 2 * 180 / Math.PI)%360; 
if(ang<180) ang -= 90; else ang += 90; 
return 'translate(' + centroid + ') rotate(' + ang +')';

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

2 个答案: