Rotate пирог этикетки в dc.js Pie Chart

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 + ')'; 
     }); 
}); 

Для собственного развлечения, я также повернули метки, используя начальный и конечный углы среза пирога.

К сожалению, вы не можете сделать это как событие до перехода и избегать «прыжка». Это просто будет перезаписано анимацией. Для этого вам потребуются некоторые изменения в dc.js - file an issue, если вам это интересно.