회전 파이

Question

이의 내가 파이 차트 작성하는 dc.js를 다음 코드 있다고 가정 해 봅시다 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에 약간의 변경이 필요합니다.