解决：C3 - 标签未显示在具有窄弧的 C3 饼图中答案

【问题标题】：SOLVE: C3 - Labels not showing in C3 pie chart whit narrow arcs解决：C3 - 标签未显示在具有窄弧的 C3 饼图中
【发布时间】：2018-03-25 11:45:25
【问题描述】：

我正在使用 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) +")");

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

【问题讨论】：

标签： javascript d3.js charts pie-chart c3.js

【解决方案1】：

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

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

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

【讨论】：