javascript - C3.js 图例重叠

Question

我正在尝试创建折线图，例如 here ，但图例是重叠的。

我使用的 JavaScript 代码:

var chart = c3.generate({
    data: {
        columns: [
            ['Country 1', 6, 5.95, 6.69, 7.47, 3.53, 0.92, 7.21, 4.02, 3.97, 4.18, 4.27],
            ['Country 2', 7.45, 7.31, 8.69, 8.74, 5.7, -6.15, 4.4, 4.67, 3.8, 2.02, 3.04],
            ['Country 3', 3.82, 3.06, 2.56, 4.43, 2.2, 1.23, 2.53, 2.4, 3.53, 2.62, 2.58],
            ['Country 4', 7.58, 8.57, 8.24, 7.54, 4.69, 3.68, 7.62, 6.55, 3.64, 4.02, 4.63],
            ['Country 5', 6.48, 5.78, 6.1, 6.51, 4.27, 1.15, 8.04, 4.57, 5.51, 4.99, 5.1]
        ],
    },
    legend: {
        show: true
    }
});
d3.selectAll("#chart .c3-legend-item").style("font-size","20px"); 

Answer 1

c3 部分定位基于字体大小。由于您是在图表渲染后设置字体大小，因此它无法将其考虑在内。因此，您最好将字体大小设置为常规 CSS:

.c3-legend-item{
  font-size: 20px;
}

已更新fiddle .

编辑

要在之后进行设置，您必须自己“修复”所有位置。像这样的事情:

var runW = 24;
d3.selectAll("#chart .c3-legend-item")
    .style("font-size","20px")
  .each(function(d){
    var node = this,
        self = d3.select(this);
    setTimeout(function(){
      self.selectAll('rect').attr('x', runW);
        self.select('text').attr('x', runW + 10);
      runW += node.getBBox().width + 10;
    }, 300);
  });

已更新fiddle .