2017-10-13 207 views
0

我正在使用C3庫創建餅圖並使用D3來自定義C3不包含的一些屬性。
我正在移動C3在餅圖外部圓弧內創建的標籤,但是當圓弧變窄時,標籤不會出現。
我認爲是禁用標籤的內部選項,因爲在正常情況下,它不適合。即使沒有合適的標籤,我如何再次激活標籤?
這裏是我的代碼來創建圖表:解決方法: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/