旋轉餅圖標籤在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。