Cache tick text size - #730

c3.js

@@ -6455,6 +6455,8 @@
     // Features:
     // 1. category axis
     // 2. ceil values of translate/x/y to int for half pixel antialiasing
+    // 3. multiline tick text
+    var tickTextCharSize;
     function c3_axis(d3, params) {
         var scale = d3.scale.linear(), orient = "bottom", innerTickSize = 6, outerTickSize, tickPadding = 3, tickValues = null, tickFormat, tickArguments;
 
@@ -6503,6 +6505,9 @@
             return tickFormat ? tickFormat(v) : v;
         }
         function getSizeFor1Char(tick) {
+            if (tickTextCharSize) {
+                return tickTextCharSize;
+            }
             var size = {
                 h: 11.5,
                 w: 5.5
@@ -6517,6 +6522,7 @@
                     size.w = w;
                 }
             }).text('');
+            tickTextCharSize = size;
             return size;
         }
         function axis(g) {

spec/axis-spec.js

@@ -206,7 +206,7 @@ describe('c3 chart axis', function () {
 
                 it('should split x axis tick text to multiple lines', function () {
                     var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'),
-                        expectedTexts = ['very long tick text on x', 'axis'],
+                        expectedTexts = ['very long tick text', 'on x axis'],
                         expectedX = '0';
                     expect(ticks.size()).toBe(6);
                     ticks.each(function () {
@@ -286,7 +286,7 @@ describe('c3 chart axis', function () {
 
                 it('should split x axis tick text to multiple lines', function () {
                     var ticks = chart.internal.main.select('.c3-axis-x').selectAll('g.tick'),
-                        expectedTexts = ['very long tick text on', 'x axis'],
+                        expectedTexts = ['very long tick', 'text on x axis'],
                         expectedX = '-9';
                     expect(ticks.size()).toBe(6);
                     ticks.each(function () {
@@ -378,12 +378,13 @@ describe('c3 chart axis', function () {
                     var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'),
                         tspans = tick.selectAll('tspan'),
                         expectedTickTexts = [
-                            'this is a very long',
-                            'tick text on',
-                            'category axis'
+                            'this is a very',
+                            'long tick text',
+                            'on category',
+                            'axis',
                         ],
                         expectedX = '0';
-                    expect(tspans.size()).toBe(3);
+                    expect(tspans.size()).toBe(4);
                     tspans.each(function (d, i) {
                         var tspan = d3.select(this);
                         expect(tspan.text()).toBe(expectedTickTexts[i]);
@@ -426,9 +427,9 @@ describe('c3 chart axis', function () {
                     var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'),
                         tspans = tick.selectAll('tspan'),
                         expectedTickTexts = [
-                            'this is a very long',
-                            'tick text on category',
-                            'axis'
+                            'this is a very',
+                            'long tick text on',
+                            'category axis'
                         ],
                         expectedX = '-9';
                     expect(tspans.size()).toBe(3);
@@ -479,8 +480,8 @@ describe('c3 chart axis', function () {
                         var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'),
                             tspans = tick.selectAll('tspan'),
                             expectedTickTexts = [
-                                'this is a very long tick text on',
-                                'category axis'
+                                'this is a very long tick',
+                                'text on category axis'
                             ],
                             expectedX = '-9';
                         expect(tspans.size()).toBe(2);

src/c3.axis.js

@@ -1,6 +1,8 @@
 // Features:
 // 1. category axis
 // 2. ceil values of translate/x/y to int for half pixel antialiasing
+// 3. multiline tick text
+var tickTextCharSize;
 function c3_axis(d3, params) {
     var scale = d3.scale.linear(), orient = "bottom", innerTickSize = 6, outerTickSize, tickPadding = 3, tickValues = null, tickFormat, tickArguments;
 
@@ -49,6 +51,9 @@ function c3_axis(d3, params) {
         return tickFormat ? tickFormat(v) : v;
     }
     function getSizeFor1Char(tick) {
+        if (tickTextCharSize) {
+            return tickTextCharSize;
+        }
         var size = {
             h: 11.5,
             w: 5.5
@@ -63,6 +68,7 @@ function c3_axis(d3, params) {
                 size.w = w;
             }
         }).text('');
+        tickTextCharSize = size;
         return size;
     }
     function axis(g) {