New tick culling algorithm

src/c3.axis.js

@@ -34,38 +34,6 @@ function c3_axis(d3, params, $$) {
         var start = domain[0], stop = domain[domain.length - 1];
         return start < stop ? [ start, stop ] : [ stop, start ];
     }
-    function shouldDrawTickText(id, m){
-        // Multiplier to handle long tick texts
-        m = m || 1;
-        var heightLimits = [
-            // Left is width, right is n
-            // Every nth tick will be shown
-            [-Infinity],
-            [100, 6],
-            [150, 4],
-            [270, 2],
-            [Infinity, 1]
-        ];
-        var widthLimits = [
-            // Left is width, right is n
-            // Every nth tick will be show
-            [-Infinity],
-            [70, 6],
-            [140, 4],
-            [300, 2],
-            [Infinity, 1]
-        ];
-        var divisor;
-        var size = $$.config.axis_rotated ? $$.currentWidth : $$.currentHeight;
-        var sizeLimits = $$.config.axis_rotated ? widthLimits : heightLimits;
-        for(var i = sizeLimits.length-1; i--; ){
-            if(size > sizeLimits[i][0] * m) {
-                divisor = sizeLimits[i+1][1];
-                break;
-            }
-        }
-        return !(id%divisor);
-    }
     function generateTicks(scale) {
         var i, domain, ticks = [], startValue = 0;
 
@@ -204,6 +172,16 @@ function c3_axis(d3, params, $$) {
                 return dy;
             }
 
+            function hasIntersection (rect1, rect2) {
+                var r1x2 = rect1.x + rect1.width;
+                var r2x2 = rect2.x + rect2.width;
+                var r1y2 = rect1.y + rect1.height;
+                var r2y2 = rect2.y + rect2.height;
+
+                return (rect1.x < r2x2 && r1x2 > rect2.x &&
+                        rect1.y < r2y2 && r1y2 > rect2.y);
+            }
+
             function tickSize(d) {
                 return innerTickSize;
             }
@@ -224,14 +202,17 @@ function c3_axis(d3, params, $$) {
             tspan.enter().append('tspan');
             tspan.exit().remove();
 
-            text.style('display', function(d, i){
-                return shouldDrawTickText(i - indexOfZero, $$.config.axis_rotated ? maxTickLength : 1) ? 'block' : 'none';
+            var axisId = $$.isXAxis(orient) ? 'x' : 'y';
+            var textClass = '.c3-axis-' + axisId + ' .tick'
+            var textRects = text.data().map(function(data) {
+                var rect = $$.getTextRect(textFormatted(data), textClass);
+                // Smaal additional padding between texts
+                rect.width += 10;
+                return rect;
             });
 
             var fontSize = parseFloat(getStyleValue($$, '.c3-axis-y .tick', 'font-size'));
 
-            var axisId = $$.isXAxis(orient) ? 'x' : 'y';
-
             tspan.text(function (d) {
 
                 if (d.splitted.length) {
@@ -340,6 +321,46 @@ function c3_axis(d3, params, $$) {
             }
             tickEnter.call(tickTransform, scale0);
             tickUpdate.call(tickTransform, scale1);
+
+            var rectPositionFn;
+            switch(orient) {
+                case 'top':
+                case 'bottom':
+                    rectPositionFn = function(rect, d) {
+                        rect.x = scale1(d);
+                        rect.y = 0;
+                    }
+                    break;
+                case 'left':
+                case 'right':
+                    rectPositionFn = function(rect, d) {
+                        rect.x = 0;
+                        rect.y = scale1(d);
+                    }
+                    break;
+            }
+
+            var last = textRects.length - 1;
+
+            rectPositionFn(textRects[0], text.data()[0]);
+            rectPositionFn(textRects[last], text.data().pop());
+            
+            var addedTextRects = [textRects[0], textRects[last]];
+            text.style('display', function(d, i){
+                if(i === 0 || i === last) return 'block';
+
+                var rect = textRects[i];
+                rectPositionFn(rect, d);
+                var visible = !addedTextRects.some(function(added){
+                    return hasIntersection(rect, added);
+                });
+
+                if(visible){
+                    addedTextRects.push(rect);
+                }
+
+                return visible ? 'block' : 'none';
+            });
         });
     }
     axis.scale = function (x) {