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.

Answer 2

Для этого вы можете использовать пользовательскую легенду. Во-первых, вам нужно выключить легенду по умолчанию в функции генерации

легенда: { шоу: ложь }

Затем определим следующую функцию. Он в основном визуализирует пользовательские легенды, которые мы хотели бы отобразить и их поведение.

//Defines the toggle function. 
function toggle(id) { 
     chart.toggle(id); 
    } 
    //.container is the container of the chart , .chart is the container where our // chart renders. span is used to wrap our custom legends. 
    d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span') 
     .data(['data1', 'data2', 'data3']) 
     .enter().append('span') 
     .attr('data-id', function (id) { return id; }) 
     .html(function (id) { return id; }) 
     .each(function (id) { 
      d3.select(this).style('background-color', chart.color(id)); 
     }) 
     .on('mouseover', function (id) { 
      chart.focus(id); 
     }) 
     .on('mouseout', function (id) { 
      chart.revert(); 
     }) 
     .on('click', function (id) { 
//This toggles the animation for selected and not selected 
$(this).toggleClass("c3-legend-item-hidden") 
      chart.toggle(id); 
     }); 

Эталонные Ссылки: http://c3js.org/samples/legend_custom.html https://jsfiddle.net/yasu47b/3fk72ay5/