Fix spec of zoom for d3.v4

7 years ago · c17f101df8
4 changed files with 104 additions and 11 deletions
--- a/htdocs/index.html
+++ b/htdocs/index.html
@ -467,6 +467,12 @@
                Show tooltip programmatically
              </a>
            </div>
+            <div class="col-md-4">
+              <h3>Zoom</h3>
+              <a href="./samples/api_zoom.html">
+                Zoom programmatically
+              </a>
+            </div>
          </div>
        </div>
      </div>
--- a/htdocs/samples/api_zoom.html
+++ b/htdocs/samples/api_zoom.html
@ -0,0 +1,76 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart"></div>
+
+    <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart = c3.generate({
+        bindto: '#chart',
+        data: {
+          columns: [
+            generateData(100)
+          ],
+        },
+        zoom: {
+          enabled: true,
+          initialRange: [30, 60],
+          onzoomstart: function (event) {
+            console.log("onzoomstart", event);
+          },
+          onzoom: function (domain) {
+            console.log("onzoom", domain);
+          },
+          onzoomend: function (domain) {
+            console.log("onzoomend", domain);
+          },
+        },
+        subchart: { show: true }
+      });
+
+      function generateData(n) {
+        var column = ['sample'];
+        for (var i = 0; i < n; i++) {
+          column.push(Math.random() * 500);
+        }
+        return column;
+      }
+
+     // with subchart
+     setTimeout(function () {
+         chart.zoom([45,75]);
+     }, 1000);
+
+     setTimeout(function () {
+         chart.zoom([25,90]);
+     }, 2000);
+
+     setTimeout(function () {
+         chart.unzoom();
+     }, 3000);
+
+     // without subchart
+     setTimeout(function () {
+         chart.internal.config.subchart_show = false;
+         chart.flush();
+     }, 4000);
+
+     setTimeout(function () {
+         chart.zoom([45,75]);
+     }, 5000);
+
+     setTimeout(function () {
+         chart.zoom([25,90]);
+     }, 6000);
+
+     setTimeout(function () {
+         chart.unzoom();
+     }, 7000);
+
+    </script>
+  </body>
+</html>
--- a/src/api.zoom.js
+++ b/src/api.zoom.js
@ -7,11 +7,16 @@ c3_chart_fn.zoom = function (domain) {
        if ($$.isTimeSeries()) {
            domain = domain.map(function (x) { return $$.parseDate(x); });
        }
-        $$.brush.extent(domain);
-        $$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale});
+        if ($$.config.subchart_show) {
+            $$.brush.selectionAsValue(domain);
+        }
+        else {
+            $$.updateXDomain(null, true, false, false, domain);
+            $$.redraw({withY: $$.config.zoom_rescale, withSubchart: false});
+        }
        $$.config.zoom_onzoom.call(this, $$.x.orgDomain());
    }
-    return $$.brush.extent();
+    return domain;
 };
 c3_chart_fn.zoom.enable = function (enabled) {
    var $$ = this.internal;
@ -20,8 +25,13 @@ c3_chart_fn.zoom.enable = function (enabled) {
 };
 c3_chart_fn.unzoom = function () {
    var $$ = this.internal;
-    $$.brush.clear().update();
-    $$.redraw({withUpdateXDomain: true});
+    if ($$.config.subchart_show) {
+        $$.brush.clear();
+    }
+    else {
+        $$.updateXDomain(null, true, false, false, $$.subX.domain());
+        $$.redraw({withY: $$.config.zoom_rescale, withSubchart: false});
+    }
 };

 c3_chart_fn.zoom.max = function (max) {
--- a/src/subchart.js
+++ b/src/subchart.js
@ -6,11 +6,13 @@ c3_chart_internal_fn.initBrush = function (scale) {
    var $$ = this, d3 = $$.d3;
    // TODO: dynamically change brushY/brushX according to axis_rotated.
    $$.brush = ($$.config.axis_rotated ? d3.brushY() : d3.brushX()).on("brush", function () {
-        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") { return; }
+        var event = d3.event.sourceEvent;
+        if (event && event.type === "zoom") { return; }
        $$.redrawForBrush();
    }).on("end", function () {
-        if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") { return; }
-        if ($$.brush.empty() && d3.event.sourceEvent.type !== 'end') { $$.brush.clear(); }
+        var event = d3.event.sourceEvent;
+        if (event && event.type === "zoom") { return; }
+        if ($$.brush.empty() && event && event.type !== 'end') { $$.brush.clear(); }
    });
    $$.brush.updateExtent = function () {
        var range = this.scale.range(), extent;
@ -42,7 +44,7 @@ c3_chart_internal_fn.initBrush = function (scale) {
        if (selectionAsValue) {
            if ($$.context) {
                selection = [this.scale(selectionAsValue[0]), this.scale(selectionAsValue[1])];
-                $$.brush.move($$.context.select('.' + CLASS.brush), selection);
+                $$.brush.move($$.context.select('.' + CLASS.brush).transition(), selection);
            }
            return [];
        }
@ -86,8 +88,7 @@ c3_chart_internal_fn.initSubchart = function () {
    $$.axes.subx = context.append("g")
        .attr("class", CLASS.axisX)
        .attr("transform", $$.getTranslate('subx'))
-        .attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis)
-        .style("visibility", config.subchart_axis_x_show ? visibility : 'hidden');
+        .attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis);
 };
 c3_chart_internal_fn.initSubchartBrush = function () {
    var $$ = this;