Fix zoom and redraw on category axis

11 years ago · a61e7a7989
6 changed files with 118 additions and 11 deletions
--- a/c3.js
+++ b/c3.js
@ -700,7 +700,7 @@
            subYMin = __axis_rotated ? 0 : height2;
            subYMax = __axis_rotated ? width2 : 1;
            // update scales
-            x = getX(xMin, xMax, forInit ? undefined : x.domain(), function () { return xAxis.tickOffset(); });
+            x = getX(xMin, xMax, forInit ? undefined : x.orgDomain(), function () { return xAxis.tickOffset(); });
            y = getY(yMin, yMax, forInit ? undefined : y.domain());
            y2 = getY(yMin, yMax, forInit ? undefined : y2.domain());
            subX = getX(xMin, xMax, orgXDomain, function (d) { return d % 1 ? 0 : subXAxis.tickOffset(); });
@ -750,11 +750,7 @@
                scale[key] = _scale[key];
            }
            scale.orgDomain = function () {
-                var domain = _scale.domain();
-                if (orgXDomain && orgXDomain[0] === domain[0] && orgXDomain[1] < domain[1]) {
-                    domain[1] = orgXDomain[1];
-                }
-                return domain;
+                return _scale.domain();
            };
            // define custom domain() for categorized axis
            if (isCategorized) {
@ -763,7 +759,6 @@
                        domain = this.orgDomain();
                        return [domain[0], domain[1] + 1];
                    }
-                    orgXDomain = domain;
                    _scale.domain(domain);
                    return scale;
                };
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/index.html
+++ b/htdocs/index.html
@ -326,6 +326,9 @@
              <a href="./samples/zoom.html">
                Enable zoom
              </a>
+              <a href="./samples/zoom.html">
+                Zoom on category axis
+              </a>
              <a href="./samples/zoom_reduction.html">
                Zoom with reduction
              </a>
@ -363,7 +366,7 @@
              </a>
            </div>
            <div class="col-md-4">
-              <h3>grid</h3>
+              <h3>Grid</h3>
              <a href="./samples/api_xgrid_lines.html">
                Update x grid lines
              </a>
@ -392,6 +395,14 @@
              </a>
            </div>
          </div>
+          <div class="row">
+            <div class="col-md-4">
+              <h3>Data</h3>
+              <a href="./samples/api_data_colors.html">
+                Update data color
+              </a>
+            </div>
+          </div>
        </div>
      </div>

--- a/htdocs/samples/api_data_colors.html
+++ b/htdocs/samples/api_data_colors.html
@ -0,0 +1,33 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart = c3.generate({
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+          ],
+        },
+        axis: {
+          x: {
+            type: 'category'
+          }
+        }
+      });
+
+      setTimeout(function () {
+        chart.data.colors({data1: '#000'});
+      }, 1000);
+
+
+    </script>
+  </body>
+</html>
--- a/htdocs/samples/grids.html
+++ b/htdocs/samples/grids.html
@ -8,6 +8,7 @@
    <div id="chart3"></div>
    <div id="chart4"></div>
    <div id="chart5"></div>
+    <div id="chart6"></div>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="/js/c3.js"></script>
@ -85,6 +86,26 @@
        }
      });

+      c3.generate({
+        bindto: '#chart6',
+        data: {
+          columns: bigData
+        },
+        axis: {
+          x: {
+            type: 'category'
+          }
+        },
+        grid: {
+          x: {
+            show: true
+          },
+          y: {
+            show: true
+          }
+        }
+      });
+
    </script>
  </body>
 </html>
--- a/htdocs/samples/zoom_category.html
+++ b/htdocs/samples/zoom_category.html
@ -0,0 +1,47 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+    <button onclick="load()">Load</button>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            generateData(100)
+          ],
+        },
+        axis: {
+          x: {
+            type: 'category'
+          }
+        },
+        zoom: { enabled: true },
+        subchart: { show: true }
+      });
+
+      function load() {
+        chart.load({
+          columns: [
+            generateData(Math.random() * 1000)
+          ],
+        });
+      }
+
+      function generateData(n) {
+        var column = ['sample'];
+        for (var i = 0; i < n; i++) {
+          column.push(Math.random() * 500);
+        }
+        return column;
+      }
+
+    </script>
+  </body>
+</html>