在不截斷文本的情況下增加C3圖表中的字體大小

Question

我嘗試了不同的CSS技術來更改C3圖表中文本的字體大小。但是當我使用CSS時，文本會被截斷超出特定的字體大小（例如14px）。我正在使用水平條形圖，並在每個條的末尾顯示y軸標籤和數據（類似這樣的 - http://c3js.org/samples/axes_rotated.html）。有沒有什麼方法通過C3 API自定義字體大小？如果不是，處理這種情況的最佳方法是什麼？

Answer 1

請找代碼和fiddle：

d3.selectAll('.c3-text') 
     .each(function(d){ 
     var self = d3.select(this), 
      width = +d3.select('.c3-zoom-rect').attr('width'); 
     if (+self.attr('x') + self.node().getComputedTextLength() > width){ 
      self.attr('text-anchor', 'end'); 
      self.attr('dx', '-5'); 
     } 
    }); 

如果你曾經用折線圖軸字體大小切割問題而大傷腦筋，只需添加：

c3.generate({ 
... 
padding: { 
    left: 500 
}, 
... 
}); 

要設置一個動態值，嘗試使用一個小的jQuery插件獲取文本字符串的長度：

$.fn.textWidth = function(text, font) { 
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); 
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); 
    return $.fn.textWidth.fakeEl.width(); 
}; 

var longest_text_width = 0; 
chartData[0].forEach(function(data) { 
    var w = $.fn.textWidth(data, '13px Clear Sans'); 
    if (w > longest_text_width) { 
     longest_text_width = w; 
    } 
}); 

var chart = c3.generate({ 

    ... 

    padding: { 
    left: longest_text_width + 10 // add 10px for some spacing 
    }, 

    ... 

});