在不截断文本的情况下增加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 
    }, 

    ... 

});