2017-10-13 1 views
0

저는 C3 차트로 원형 차트를 만들고 D3을 사용하여 C3에서 알 수없는 일부 속성을 사용자 지정합니다.
C3가 외부 파이의 호 안에있는 레이블을 이동하려고합니다. 그러나 호가 좁 으면 레이블이 나타나지 않습니다.
정상적인 조건에서는 적합하지 않기 때문에 라벨을 비활성화하는 내부 옵션이라고 생각합니다. 레이블이 적합하지 않은 경우에도 어떻게 레이블을 다시 활성화 할 수 있습니까?SOLVE : C3 - C3 원형 차트에서 레이블이 좁은 호를 표시하지 않음

function pie(d1, d2, d3, d4, d5) { 
var id = '"#C"' 
var chart = c3.generate({ 
    bindto: '#C', 
    size: { 
    width: 1275,//550, 
    height: 834//350 
    }, 
    data: { 
    columns: [ 
    d1, 
    d2, 
    d3, 
    d4, 
    d5 
    ] 
    }, 
    type: 'pie' 
}, 
pie: { 
label: { 
format: function(value, ratio, id) 
{ 
    return d3.format('')(value) 
}, 
show: true, 
threshold: -1 

} 
}, 
legend: { 
    show: false 
    } 
}); 

그리고 데이터가 유사한 값을 가지고 아크가 비슷 d3.js

var pie-labels= d3.selectAll(".c3-chart-arc > text").each(function(v) { 
    var label = d3.select(this); 
    var pos = label.attr("transform").match(/-?\d+(\.\d+)?/g); 
    var h = (pos[0]*pos[0]+pos[1]*pos[1]); 
    // pos[0] is x, pos[1] is y. Do some position changes and update value 
    //135000 is the radio of the chart 
    label.attr("transform", "translate("+ (pos[0]/h*135000) +","+ (pos[1]/h*135000) +")"); 

와 차트 외부에 레이블을 이동하는 코드 :
여기 내 차트를 생성하는 코드입니다 문제가 없지만 불평등 한 데이터로 작업하는 동안 나타납니다.

답변

0

슬라이스가 특정 임계 값에 도달하지 않는 경우 파이 조각 레이블은 그려지지하지만,이 작업을 수행하는 기능은 너무 변경할 수 있습니다

oninit: function() { 
    this.meetsArcLabelThreshold = function() { return true; }; 
} 

참조 : http://jsfiddle.net/2hsr20hm/