Add zoom.initialRange option for d3.v4

htdocs/index.html

@@ -179,9 +179,9 @@
               </a>
             </div>
             <div class="col-md-4">
-              <h3>Default X Extent</h3>
-              <a href="./samples/axes_x_extent.html">
-                Set default x extent
+              <h3>Default X Selection</h3>
+              <a href="./samples/axes_x_selection.html">
+                Set default x selection
               </a>
             </div>
           </div>

htdocs/samples/zoom.html

@@ -18,13 +18,9 @@
             generateData(100)
           ],
         },
-        axis: {
-          x: {
-            default: [30, 60]
-          }
-        },
         zoom: {
           enabled: true,
+          initialRange: [30, 60],
           onzoomstart: function (event) {
             console.log("onzoomstart", event);
           },
@@ -44,10 +40,12 @@
         },
         axis: {
           x: {
-            default: [30, 60]
           }
         },
-        zoom: { enabled: true },
+        zoom: {
+            enabled: true,
+            initialRange: [30, 60],
+        },
       });
 
       function load() {

src/config.js

@@ -13,6 +13,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         padding_bottom: undefined,
         resize_auto: true,
         zoom_enabled: false,
+        zoom_initialRange: undefined,
         zoom_privileged: false,
         zoom_rescale: false,
         zoom_onzoom: function () {},

src/core.js

@@ -251,7 +251,7 @@ c3_chart_internal_fn.initWithData = function (data) {
     if ($$.initTitle) { $$.initTitle(); }
     if ($$.initZoom) { $$.initZoom(); }
 
-    // Update extent based on size and scale
+    // Update selection based on size and scale
     // TODO: currently this must be called after initLegend because of update of sizes, but it should be done in initSubchart.
     if ($$.initSubchartBrush) { $$.initSubchartBrush(); }
 
@@ -277,9 +277,6 @@ c3_chart_internal_fn.initWithData = function (data) {
     // Grid lines
     if (config.grid_lines_front) { $$.initGridLines(); }
 
-    // Cover whole with rects for events
-    $$.initEventRect();
-
     // Define g for chart
     $$.initChartElements();
 
@@ -289,6 +286,9 @@ c3_chart_internal_fn.initWithData = function (data) {
     // Set targets
     $$.updateTargets($$.data.targets);
 
+    // Cover whole with rects for events
+    $$.initEventRect();
+
     // Set default extent if defined
     if (config.axis_x_selection) { $$.brush.selectionAsValue($$.getDefaultSelection()); }
 

src/interaction.js

@@ -12,7 +12,13 @@ c3_chart_internal_fn.initEventRect = function () {
 
     // event rect handle zoom event as well
     if (config.zoom_enabled && $$.zoom) {
-        $$.main.select('.' + CLASS.eventRect).call($$.zoom).on("dblclick.zoom", null);
+        $$.eventRect.call($$.zoom).on("dblclick.zoom", null);
+        if (config.zoom_initialRange) {
+            // WORKAROUND: Add transition to apply transform immediately when no subchart
+            $$.eventRect.transition().duration(0).call(
+                $$.zoom.transform, $$.zoomTransform(config.zoom_initialRange)
+            );
+        }
     }
 };
 c3_chart_internal_fn.redrawEventRect = function () {
@@ -124,9 +130,9 @@ c3_chart_internal_fn.redrawEventRect = function () {
             ) : function () {}
         );
 };
-c3_chart_internal_fn.dispatchEvent = function (type, index, mouse) {
+c3_chart_internal_fn.dispatchEvent = function (type, mouse) {
     var $$ = this,
-        selector = '.' + CLASS.eventRect + (!$$.isMultipleX() ? '-' + index : ''),
+        selector = '.' + CLASS.eventRect,
         eventRect = $$.main.select(selector).node(),
         box = eventRect.getBoundingClientRect(),
         x = box.left + (mouse ? mouse[0] : 0),

src/zoom.js

@@ -45,6 +45,11 @@ c3_chart_internal_fn.initZoom = function () {
 
     return $$.zoom.updateExtent();
 };
+c3_chart_internal_fn.zoomTransform = function (range) {
+    var $$ = this, s = [$$.x(range[0]), $$.x(range[1])];
+    return $$.d3.zoomIdentity.scale($$.width / (s[1] - s[0])).translate(-s[0], 0);
+};
+
 c3_chart_internal_fn.getZoomDomain = function () {
     var $$ = this, config = $$.config, d3 = $$.d3,
         min = d3.min([$$.orgXDomain[0], config.zoom_x_min]),
@@ -72,7 +77,7 @@ c3_chart_internal_fn.redrawForZoom = function () {
         withEventRect: false,
         withDimension: false
     });
-    if (d3.event.sourceEvent.type === 'mousemove') {
+    if (d3.event.sourceEvent && d3.event.sourceEvent.type === 'mousemove') {
         $$.cancelClick = true;
     }
     config.zoom_onzoom.call($$.api, x.orgDomain());