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