Calculate tick width before update scales - #295

c3.js

@@ -975,12 +975,25 @@
             return textAnchorForAxisLabel(__axis_rotated, getY2AxisLabelPosition());
         }
         function getMaxTickWidth(id) {
-            var maxWidth = 0, axisClass = id === 'x' ? CLASS.axisX : id === 'y' ? CLASS.axisY : CLASS.axisY2;
+            var maxWidth = 0, targetsToShow, scale, axis;
             if (svg) {
-                svg.selectAll('.' + axisClass + ' .tick text').each(function () {
+                targetsToShow = filterTargetsToShow(c3.data.targets);
+                if (id === 'y') {
+                    scale = y.copy().domain(getYDomain(targetsToShow, 'y'));
+                    axis = getYAxis(scale, yOrient, __axis_y_tick_format, __axis_y_ticks);
+                } else if (id === 'y2') {
+                    scale = y2.copy().domain(getYDomain(targetsToShow, 'y2'));
+                    axis = getYAxis(scale, y2Orient, __axis_y2_tick_format, __axis_y2_ticks);
+                } else {
+                    scale = x.copy().domain(getXDomain(targetsToShow));
+                    axis = getXAxis(scale, xOrient, getXAxisTickFormat(), __axis_x_tick_values ? __axis_x_tick_values : xAxis.tickValues());
+                }
+                main.append("g").call(axis).each(function () {
+                    d3.select(this).selectAll('text').each(function () {
                         var box = this.getBoundingClientRect();
                         if (maxWidth < box.width) { maxWidth = box.width; }
                     });
+                }).remove();
             }
             currentMaxTickWidth = maxWidth <= 0 ? currentMaxTickWidth : maxWidth;
             return currentMaxTickWidth;
@@ -3571,21 +3584,6 @@
             transitions.axisY2.call(y2Axis);
             transitions.axisSubX.call(subXAxis);
 
-            if (targetsToShow.length) {
-                // Update dimensions according to the width of ticks, etc
-                updateSizes();
-                updateScales();
-                updateSvgSize();
-                transformAll(true, transitions);
-                // x changes above, so need to update domain too
-                updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain);
-                // Update axis again because the length can be updated because of update of max tick width and generate tickOffset
-                transitions.axisX.call(xAxis);
-                transitions.axisSubX.call(subXAxis);
-                transitions.axisY.call(yAxis);
-                transitions.axisY2.call(y2Axis);
-            }
-
             // Update axis label
             updateAxisLabels(withTransition);
 
@@ -5116,7 +5114,7 @@
         c3.groups = function (groups) {
             if (isUndefined(groups)) { return __data_groups; }
             __data_groups = groups;
-            redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true});
+            redraw();
             return __data_groups;
         };
 

htdocs/samples/api_xgrid_lines.html

@@ -8,7 +8,10 @@
     <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <script src="/js/c3.js"></script>
     <script>
-      var chart = c3.generate({
+
+      var axis_rotated = false, axis_x_type = "";
+
+      var generate = function () { return c3.generate({
         bindto: '#chart',
         data: {
           columns: [
@@ -16,46 +19,106 @@
           ]
         },
         axis: {
-//          rotated: true,
+          rotated: axis_rotated,
+          x: {
+            type: axis_x_type
+          }
         },
         grid: {
           x: {
 //            lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
           }
         }
-      });
+      }); }, chart = generate();
 
-      setTimeout(function () {
+      var queue = [
+      function () {
         chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
-      }, 1000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids([{value: 2, text:'Label 2'}]);
-      }, 2000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
-      }, 3000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids.remove({value:2});
-      }, 4000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids.remove({class:'hoge'});
-      }, 5000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids.remove([{value: 1}, {value: 4}]);
-      }, 6000);
-
-      setTimeout(function () {
+      },
+      function () {
         chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
-      }, 7000);
-
-      setTimeout(function () {
+      },
+      function () {
+        chart.xgrids.remove();
+      },
+      function () {
+        axis_rotated = true;
+        chart = generate();
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids([{value: 2, text:'Label 2'}]);
+      },
+      function () {
+        chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
+      },
+      function () {
+        chart.xgrids.remove({value:2});
+      },
+      function () {
+        chart.xgrids.remove({class:'hoge'});
+      },
+      function () {
+        chart.xgrids.remove([{value: 1}, {value: 4}]);
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids.remove();
+      },
+      function () {
+        axis_rotated = false;
+        axis_x_type = 'category';
+        chart = generate();
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
+        chart.xgrids([{value: 2, text:'Label 2'}]);
+      },
+      function () {
+        chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
+      },
+      function () {
+        chart.xgrids.remove({value:2});
+      },
+      function () {
+        chart.xgrids.remove({class:'hoge'});
+      },
+      function () {
+        chart.xgrids.remove([{value: 1}, {value: 4}]);
+      },
+      function () {
+        chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
+      },
+      function () {
         chart.xgrids.remove();
-      }, 8000);
+      },
+      ];
+
+      var i = 0;
+      queue.forEach(function (f) {
+        setTimeout(f, 1000 * i++);
+      });
 
     </script>
   </body>