javascript - 解决 : C3 - Labels not showing in C3 pie chart whit narrow arcs

Question

我正在使用 C3 库创建饼图并使用 D3 自定义一些 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) +")");

当数据具有相似的值并且弧相似时，没有问题，但在处理不相等的数据时会出现。

Answer 1

如果切片没有达到某个阈值，则不会绘制饼图切片标签，但是可以这样更改执行此操作的函数:

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

参见:http://jsfiddle.net/2hsr20hm/