fix(zoom): Fix on .zoom() API

Make to setting domain value directly. Fix #581 Close #582
naver · Sep 7, 2018 · cd0d109 · cd0d109
1 parent 0c0374f
commit cd0d109
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 46 deletions.
diff --git a/spec/api/api.zoom-spec.js b/spec/api/api.zoom-spec.js
@@ -214,25 +214,28 @@ describe("API zoom", function() {
 	});
 
 	describe("unzoom", () => {
-		chart = util.generate({
-			data: {
-				columns: [
-					["data1", 30, 200, 100, 400, 150, 250]
-				]
-			},
-			zoom: {
-				enabled: true
-			}
+		before(() => {
+			chart = util.generate({
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250]
+					]
+				},
+				zoom: {
+					enabled: true
+				}
+			});
 		});
 
 		it("should be unzoomed properly", () => {
+			const internal = chart.internal;
 			const target = [1, 4];
-			const orginal = chart.internal.x.domain();
+			const original = internal.x.domain();
 			let domain;
 
 			chart.zoom(target);
 
-			domain = chart.internal.zoomScale.domain().map(Math.round);
+			domain = internal.zoomScale.domain().map(Math.round);
 
 			expect(domain[0]).to.be.equal(target[0]);
 			expect(domain[1]).to.be.equal(target[1]);
@@ -241,8 +244,8 @@ describe("API zoom", function() {
 
 			domain = chart.internal.x.domain();
 
-			expect(domain[0]).to.be.equal(orginal[0]);
-			expect(domain[1]).to.be.equal(orginal[1]);
+			expect(domain[0]).to.be.equal(original[0]);
+			expect(domain[1]).to.be.equal(original[1]);
 		});
 	});
 

diff --git a/spec/interactions/zoom-spec.js b/spec/interactions/zoom-spec.js
@@ -245,7 +245,7 @@ describe("ZOOM", function() {
 
 		    tick = axisY.selectAll(".tick").nodes().pop();
 
-		    expect(+tick.textContent).to.be.equal(6000);
+		    expect(+tick.textContent).to.be.equal(3000);
 	    });
     });
 

diff --git a/src/api/api.zoom.js b/src/api/api.zoom.js
@@ -42,17 +42,11 @@ const zoom = function(domainValue) {
 			$$.brush.getSelection().call($$.brush.move, [xScale(domain[0]), xScale(domain[1])]);
 			resultDomain = domain;
 		} else {
-			const orgDomain = $$.subX.domain();
-			const k = (orgDomain[1] - orgDomain[0]) / (domain[1] - domain[0]);
-			const gap = $$.isCategorized() ? $$.xAxis.tickOffset() : 0;
-			const tx = isTimeSeries ?
-				(0 - k * $$.x(domain[0].getTime())) : domain[0] - k * ($$.x(domain[0]) - gap);
+			$$.x.domain(domain);
+			$$.zoomScale = $$.x;
+			$$.xAxis.scale($$.zoomScale);
 
-			$$.zoom.updateTransformScale(
-				d3ZoomIdentity.translate(tx, 0).scale(k)
-			);
-
-			resultDomain = $$.zoomScale.domain();
+			resultDomain = $$.zoomScale.orgDomain();
 		}
 
 		$$.redraw({

diff --git a/src/interactions/zoom.js b/src/interactions/zoom.js
@@ -40,11 +40,7 @@ extend(ChartInternal.prototype, {
 		$$.redrawEventRect();
 
 		if (zoomEnabled && bind) {
-			if (zoomEnabled === true || zoomEnabled.type === "wheel") {
-				$$.bindZoomOnEventRect();
-			} else if (zoomEnabled.type === "drag") {
-				$$.bindZoomOnDrag();
-			}
+			$$.bindZoomOnEventRect(zoomEnabled.type);
 		} else if (bind === false) {
 			$$.api.unzoom();
 
@@ -161,7 +157,7 @@ extend(ChartInternal.prototype, {
 		});
 
 		$$.cancelClick = isMousemove;
-		callFn(config.zoom_onzoom, $$.api, $$.x.orgDomain());
+		callFn(config.zoom_onzoom, $$.api, $$.subX.domain());
 	},
 
 	/**
@@ -180,7 +176,7 @@ extend(ChartInternal.prototype, {
 		$$.redrawEventRect();
 		$$.updateZoom();
 
-		callFn($$.config.zoom_onzoomend, $$.api, $$.x.orgDomain());
+		callFn($$.config.zoom_onzoomend, $$.api, $$.subX.domain());
 	},
 
 	/**
@@ -206,15 +202,16 @@ extend(ChartInternal.prototype, {
 
 		if ($$.zoomScale) {
 			const zoomDomain = $$.zoomScale.domain();
-			const xDomain = $$.x.domain();
+			const xDomain = $$.subX.domain();
 			const delta = 0.015; // arbitrary value
 
 			// check if the zoomed chart is fully shown, then reset scale when zoom is out as initial
 			if (
 				(zoomDomain[0] <= xDomain[0] || (zoomDomain[0] - delta) <= xDomain[0]) &&
 				(xDomain[1] <= zoomDomain[1] || xDomain[1] <= (zoomDomain[1] - delta))
 			) {
-				$$.xAxis.scale($$.x);
+				$$.xAxis.scale($$.subX);
+				$$.x.domain($$.subX.orgDomain());
 				$$.zoomScale = null;
 			}
 		}
@@ -224,11 +221,12 @@ extend(ChartInternal.prototype, {
 	 * Attach zoom event on <rect>
 	 * @private
 	 */
-	bindZoomOnEventRect() {
+	bindZoomOnEventRect(type) {
 		const $$ = this;
+		const behaviour = type === "drag" ? $$.zoomBehaviour : $$.zoom;
 
 		$$.main.select(`.${CLASS.eventRects}`)
-			.call($$.zoom)
+			.call(behaviour)
 			.on("dblclick.zoom", null);
 	},
 
@@ -262,6 +260,8 @@ extend(ChartInternal.prototype, {
 				zoomRect
 					.attr("x", start)
 					.attr("width", 0);
+
+				$$.onZoomStart();
 			})
 			.on("drag", function() {
 				end = d3Mouse(this)[0];
@@ -283,23 +283,18 @@ extend(ChartInternal.prototype, {
 					[start, end] = [end, start];
 				}
 
+				if (start < 0) {
+					end += Math.abs(start);
+					start = 0;
+				}
+
 				if (start !== end) {
 					$$.api.zoom([start, end].map(v => scale.invert(v)));
+					$$.onZoomEnd();
 				}
 			});
 	},
 
-	/**
-	 * Enable zooming by dragging using the zoombehaviour.
-	 * @private
-	 */
-	bindZoomOnDrag() {
-		const $$ = this;
-
-		$$.main.select(`.${CLASS.eventRects}`)
-			.call($$.zoomBehaviour);
-	},
-
 	setZoomResetButton() {
 		const $$ = this;
 		const config = $$.config;