C3.js环形图（Donut Chart）提示框（Tooltip）不显示问题求助

这个问题我之前也碰到过，是C3 0.6.x版本搭配D3 4.x时的一个小坑——当你把环形图的标签设置为donut.label.show: false时，C3内部会跳过扇区交互事件（比如mouseover）的绑定，而这些事件正是触发tooltip的核心逻辑，所以tooltip就没法正常显示了。

下面给你几个可行的解决方案：

方案1：用CSS隐藏标签（最简便） #

不要直接设置show: false，而是保留标签的显示逻辑，通过CSS把标签元素隐藏掉。这样既能达到隐藏标签的效果，又能让C3正常初始化扇区的交互事件，tooltip就能正常工作了。

完整代码示例：

<div id="chart"></div>

/* 隐藏环形图的扇区标签 */
.c3-chart-arcs .c3-chart-arcs-text {
    display: none;
}

var chart = c3.generate({ 
    bindto: d3.select('#chart'), 
    size: { width: 500 }, 
    data:{ 
        columns: [ 
            ['data1', 30], ['data2', 120], ['data3',45], 
            ['data120', 30], ['data121', 120], ['data311',56], 
            ['data4', 30], ['data5', 120], ['data6',45], 
            ['data7', 20], ['data8', 90], ['data9',45], 
            ['data10', 30], ['data11',38], ['data12',33] 
        ], 
        type : 'donut' 
    }, 
    donut:{ 
        label: {show:true } // 这里保持为true，靠CSS隐藏
    }, 
    tooltip:{show:true}, 
    legend: { position:'right' } 
});

方案2：升级C3版本 #

C3的0.7.x及以上版本修复了这个和D3 4.x的兼容性问题，升级后你可以直接设置donut.label.show: false，tooltip依然能正常触发。

方案3：手动绑定tooltip事件 #

如果不想升级版本或用CSS，也可以在图表生成后，手动给每个扇区绑定鼠标事件来触发tooltip：

var chart = c3.generate({ 
    // 你的原有配置不变
    donut:{ 
        label: {show:false } 
    }, 
    // ...其他配置
});

// 手动添加鼠标事件
d3.selectAll('.c3-chart-arc')
  .on('mouseover', function(d) {
    chart.tooltip.show({data: [d]});
  })
  .on('mouseout', function() {
    chart.tooltip.hide();
  });

内容的提问来源于stack exchange，提问作者Pat070