Fix category axis tick when load API called - #756

c3.js

@@ -6616,9 +6616,10 @@
                         return splitted.map(function (s) {
                             return { index: i, splitted: s };
                         });
-                    })
-                  .enter().append('tspan')
-                    .text(function (d) { return d.splitted; });
+                    });
+                tspan.enter().append('tspan');
+                tspan.exit().remove();
+                tspan.text(function (d) { return d.splitted; });
 
                 switch (orient) {
                 case "bottom":

spec/api.load-spec.js

+var describe = window.describe,
+    expect = window.expect,
+    it = window.it,
+    beforeEach = window.beforeEach;
+
+describe('c3 api load', function () {
+    'use strict';
+
+    var chart, d3;
+
+    var args = {
+        data: {
+            columns: [
+                ['data1', 30, 200, 100, 400, 150, 250],
+                ['data2', 5000, 2000, 1000, 4000, 1500, 2500]
+            ]
+        }
+    };
+
+    beforeEach(function (done) {
+        chart = window.initChart(chart, args, done);
+        d3 = chart.internal.d3;
+    });
+
+    describe('indexed data', function () {
+
+        describe('as column', function () {
+
+            it('should load additional data', function (done) {
+                var main = chart.internal.main,
+                    legend = chart.internal.legend;
+                chart.load({
+                    columns: [
+                        ['data3', 800, 500, 900, 500, 1000, 700]
+                    ]
+                });
+                setTimeout(function () {
+                    var target = main.select('.c3-chart-line.c3-target.c3-target-data3'),
+                        legendItem = legend.select('.c3-legend-item.c3-legend-item-data3');
+                    expect(target.size()).toBe(1);
+                    expect(legendItem.size()).toBe(1);
+                    done();
+                }, 500);
+            });
+
+        });
+
+    });
+
+    describe('category data', function () {
+
+        it('should update arg to category data', function () {
+            args = {
+                data: {
+                    x: 'x',
+                    columns: [
+                        ['x', 'cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6'],
+                        ['data1', 30, 200, 100, 400, 150, 250],
+                        ['data2', 5000, 2000, 1000, 4000, 1500, 2500]
+                    ]
+                },
+                axis: {
+                    x: {
+                        type: 'category'
+                    }
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        describe('as column', function () {
+
+            it('should load additional data', function (done) {
+                var main = chart.internal.main,
+                    legend = chart.internal.legend;
+                chart.load({
+                    columns: [
+                        ['data3', 800, 500, 900, 500, 1000, 700]
+                    ]
+                });
+                setTimeout(function () {
+                    var target = main.select('.c3-chart-line.c3-target.c3-target-data3'),
+                        legendItem = legend.select('.c3-legend-item.c3-legend-item-data3'),
+                        tickTexts = main.selectAll('.c3-axis-x g.tick text'),
+                        expected = ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6'];
+                    expect(target.size()).toBe(1);
+                    expect(legendItem.size()).toBe(1);
+                    tickTexts.each(function (d, i) {
+                        var text = d3.select(this).select('tspan').text();
+                        expect(text).toBe(expected[i]);
+                    });
+                    done();
+                }, 500);
+            });
+
+            it('should load additional data', function (done) {
+                var main = chart.internal.main,
+                    legend = chart.internal.legend;
+                chart.load({
+                    columns: [
+                        ['x', 'new1', 'new2', 'new3', 'new4', 'new5', 'new6'],
+                        ['data3', 800, 500, 900, 500, 1000, 700]
+                    ]
+                });
+                setTimeout(function () {
+                    var target = main.select('.c3-chart-line.c3-target.c3-target-data3'),
+                        legendItem = legend.select('.c3-legend-item.c3-legend-item-data3'),
+                        tickTexts = main.selectAll('.c3-axis-x g.tick text'),
+                        expected = ['new1', 'new2', 'new3', 'new4', 'new5', 'new6'];
+                    expect(target.size()).toBe(1);
+                    expect(legendItem.size()).toBe(1);
+                    tickTexts.each(function (d, i) {
+                        var text = d3.select(this).select('tspan').text();
+                        expect(text).toBe(expected[i]);
+                    });
+                    done();
+                }, 500);
+            });
+
+        });
+
+    });
+
+});

src/c3.axis.js

@@ -167,9 +167,10 @@ function c3_axis(d3, params) {
                     return splitted.map(function (s) {
                         return { index: i, splitted: s };
                     });
-                })
-              .enter().append('tspan')
-                .text(function (d) { return d.splitted; });
+                });
+            tspan.enter().append('tspan');
+            tspan.exit().remove();
+            tspan.text(function (d) { return d.splitted; });
 
             switch (orient) {
             case "bottom":