diff --git a/src/legend.js b/src/legend.js index eb92697..7bac6f9 100644 --- a/src/legend.js +++ b/src/legend.js @@ -130,7 +130,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) { function getTextBox(textElement, id) { if (!$$.legendItemTextBox[id]) { - $$.legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem); + $$.legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem, textElement); } return $$.legendItemTextBox[id]; } diff --git a/src/text.js b/src/text.js index 9c71c4c..9327037 100644 --- a/src/text.js +++ b/src/text.js @@ -47,14 +47,16 @@ c3_chart_internal_fn.redrawText = function (xForText, yForText, forFlow, withTra .style("fill-opacity", forFlow ? 0 : this.opacityForText.bind(this)) ]; }; -c3_chart_internal_fn.getTextRect = function (text, cls) { +c3_chart_internal_fn.getTextRect = function (text, cls, element) { var dummy = this.d3.select('body').append('div').classed('c3', true), svg = dummy.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0), + font = this.d3.select(element).style('font'), rect; svg.selectAll('.dummy') .data([text]) .enter().append('text') .classed(cls ? cls : "", true) + .style('font', font) .text(text) .each(function () { rect = this.getBoundingClientRect(); }); dummy.remove(); diff --git a/src/title.js b/src/title.js index 19169c7..a58b68e 100644 --- a/src/title.js +++ b/src/title.js @@ -13,9 +13,9 @@ c3_chart_internal_fn.redrawTitle = function () { c3_chart_internal_fn.xForTitle = function () { var $$ = this, config = $$.config, position = config.title_position || 'left', x; if (position.indexOf('right') >= 0) { - x = $$.currentWidth - $$.title.node().getBBox().width - config.title_padding.right; + x = $$.currentWidth - $$.getTextRect($$.title.node().textContent, $$.CLASS.title, $$.title.node()).width - config.title_padding.right; } else if (position.indexOf('center') >= 0) { - x = ($$.currentWidth - $$.title.node().getBBox().width) / 2; + x = ($$.currentWidth - $$.getTextRect($$.title.node().textContent, $$.CLASS.title, $$.title.node()).width) / 2; } else { // left x = config.title_padding.left; } @@ -23,7 +23,7 @@ c3_chart_internal_fn.xForTitle = function () { }; c3_chart_internal_fn.yForTitle = function () { var $$ = this; - return $$.config.title_padding.top + $$.title.node().getBBox().height; + return $$.config.title_padding.top + $$.getTextRect($$.title.node().textContent, $$.CLASS.title, $$.title.node()).height; }; c3_chart_internal_fn.getTitlePadding = function() { var $$ = this;