2017-10-13 12 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/

関連する問題