Add zoom.rescale option to rescale y/y2 when zooming - #559

c3.js

@@ -423,7 +423,7 @@
         var drawArea, drawBar, drawLine, xForText, yForText;
         var duration, durationForExit, durationForAxis;
         var waitForDraw, flow;
-        var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling;
+        var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling, xDomainForZoom;
         var xv = $$.xv.bind($$),
             cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$),
             cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$);
@@ -469,8 +469,12 @@
             $$.subXAxis.tickValues([]);
         }
 
-        $$.y.domain($$.getYDomain(targetsToShow, 'y'));
+        if (withY) {
-        $$.y2.domain($$.getYDomain(targetsToShow, 'y2'));
+            xDomainForZoom = $$.x.orgDomain();
+        }
+
+        $$.y.domain($$.getYDomain(targetsToShow, 'y', xDomainForZoom));
+        $$.y2.domain($$.getYDomain(targetsToShow, 'y2', xDomainForZoom));
 
         if (!config.axis_y_tick_values && config.axis_y_tick_count) {
             tickValues = $$.generateTickValues($$.y.domain(), config.axis_y_tick_count);
@@ -889,6 +893,7 @@
             zoom_enabled: false,
             zoom_extent: undefined,
             zoom_privileged: false,
+            zoom_rescale: false,
             zoom_onzoom: function () {},
             zoom_onzoomstart: function () {},
             zoom_onzoomend: function () {},
@@ -1248,9 +1253,10 @@
         }
         return $$.d3.max(Object.keys(ys).map(function (key) { return $$.d3.max(ys[key]); }));
     };
-    c3_chart_internal_fn.getYDomain = function (targets, axisId) {
+    c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) {
         var $$ = this, config = $$.config,
-            yTargets = targets.filter(function (d) { return $$.getAxisId(d.id) === axisId; }),
+            targetsByAxisId = targets.filter(function (t) { return $$.getAxisId(t.id) === axisId; }),
+            yTargets = xDomain ? $$.filterByXDomain(targetsByAxisId, xDomain) : targetsByAxisId,
             yMin = axisId === 'y2' ? config.axis_y2_min : config.axis_y_min,
             yMax = axisId === 'y2' ? config.axis_y2_max : config.axis_y_max,
             yDomainMin = isValue(yMin) ? yMin : $$.getYDomainMin(yTargets),
@@ -1656,6 +1662,17 @@
     c3_chart_internal_fn.filterRemoveNull = function (data) {
         return data.filter(function (d) { return isValue(d.value); });
     };
+    c3_chart_internal_fn.filterByXDomain = function (targets, xDomain) {
+        return targets.map(function (t) {
+            return {
+                id: t.id,
+                id_org: t.id_org,
+                values: t.values.filter(function (v) {
+                    return xDomain[0] <= v.x && v.x <= xDomain[1];
+                })
+            };
+        });
+    };
     c3_chart_internal_fn.hasDataLabel = function () {
         var config = this.config;
         if (typeof config.data_labels === 'boolean' && config.data_labels) {
@@ -5043,7 +5060,7 @@
         var $$ = this, x = $$.x;
         $$.redraw({
             withTransition: false,
-            withY: false,
+            withY: $$.config.zoom_rescale,
             withSubchart: false,
             withUpdateXDomain: true
         });
@@ -5126,7 +5143,7 @@
         }
         $$.redraw({
             withTransition: false,
-            withY: false,
+            withY: config.zoom_rescale,
             withSubchart: false
         });
         if (d3.event.sourceEvent.type === 'mousemove') {

src/config.js

@@ -10,6 +10,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         zoom_enabled: false,
         zoom_extent: undefined,
         zoom_privileged: false,
+        zoom_rescale: false,
         zoom_onzoom: function () {},
         zoom_onzoomstart: function () {},
         zoom_onzoomend: function () {},

src/core.js

@@ -418,7 +418,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
     var drawArea, drawBar, drawLine, xForText, yForText;
     var duration, durationForExit, durationForAxis;
     var waitForDraw, flow;
-    var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling;
+    var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling, xDomainForZoom;
     var xv = $$.xv.bind($$),
         cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$),
         cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$);
@@ -464,8 +464,12 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
         $$.subXAxis.tickValues([]);
     }
 
-    $$.y.domain($$.getYDomain(targetsToShow, 'y'));
+    if (withY) {
-    $$.y2.domain($$.getYDomain(targetsToShow, 'y2'));
+        xDomainForZoom = $$.x.orgDomain();
+    }
+
+    $$.y.domain($$.getYDomain(targetsToShow, 'y', xDomainForZoom));
+    $$.y2.domain($$.getYDomain(targetsToShow, 'y2', xDomainForZoom));
 
     if (!config.axis_y_tick_values && config.axis_y_tick_count) {
         tickValues = $$.generateTickValues($$.y.domain(), config.axis_y_tick_count);

src/data.js

@@ -232,6 +232,17 @@ c3_chart_internal_fn.filterByX = function (targets, x) {
 c3_chart_internal_fn.filterRemoveNull = function (data) {
     return data.filter(function (d) { return isValue(d.value); });
 };
+c3_chart_internal_fn.filterByXDomain = function (targets, xDomain) {
+    return targets.map(function (t) {
+        return {
+            id: t.id,
+            id_org: t.id_org,
+            values: t.values.filter(function (v) {
+                return xDomain[0] <= v.x && v.x <= xDomain[1];
+            })
+        };
+    });
+};
 c3_chart_internal_fn.hasDataLabel = function () {
     var config = this.config;
     if (typeof config.data_labels === 'boolean' && config.data_labels) {

src/domain.js

@@ -60,9 +60,10 @@ c3_chart_internal_fn.getYDomainMax = function (targets) {
     }
     return $$.d3.max(Object.keys(ys).map(function (key) { return $$.d3.max(ys[key]); }));
 };
-c3_chart_internal_fn.getYDomain = function (targets, axisId) {
+c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) {
     var $$ = this, config = $$.config,
-        yTargets = targets.filter(function (d) { return $$.getAxisId(d.id) === axisId; }),
+        targetsByAxisId = targets.filter(function (t) { return $$.getAxisId(t.id) === axisId; }),
+        yTargets = xDomain ? $$.filterByXDomain(targetsByAxisId, xDomain) : targetsByAxisId,
         yMin = axisId === 'y2' ? config.axis_y2_min : config.axis_y_min,
         yMax = axisId === 'y2' ? config.axis_y2_max : config.axis_y_max,
         yDomainMin = isValue(yMin) ? yMin : $$.getYDomainMin(yTargets),

src/subchart.js

@@ -164,7 +164,7 @@ c3_chart_internal_fn.redrawForBrush = function () {
     var $$ = this, x = $$.x;
     $$.redraw({
         withTransition: false,
-        withY: false,
+        withY: $$.config.zoom_rescale,
         withSubchart: false,
         withUpdateXDomain: true
     });

src/zoom.js

@@ -55,7 +55,7 @@ c3_chart_internal_fn.redrawForZoom = function () {
     }
     $$.redraw({
         withTransition: false,
-        withY: false,
+        withY: config.zoom_rescale,
         withSubchart: false
     });
     if (d3.event.sourceEvent.type === 'mousemove') {