解决: C3 -带有窄弧线的C3饼图中不显示的标签

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/