fix(zoom): Fix tooltip pos for bubble/scatter

Make to use zoomscale when is available to get the distance of points Fix #906
naver · Jun 3, 2019 · 1fc9c16 · 1fc9c16
1 parent fb4ba9d
commit 1fc9c16
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 13 deletions.
diff --git a/spec/interactions/zoom-spec.js b/spec/interactions/zoom-spec.js
@@ -762,5 +762,58 @@ describe("ZOOM", function() {
 				}
 			});
 		});
+
+		it("set options", () => {
+			args = {
+				data: {
+				columns: [
+						["data1", 30, 350, 200],
+						["data2", 130, 100, 10],
+						["data3", 230, 153, 85]
+				],
+				types: {
+						data1: "scatter",
+					},
+				labels: true
+				},
+			  bubble: {
+				maxR: 50
+			  },
+			  axis: {
+				x: {
+				  type: "category"
+				},
+				y: {
+				  max: 450
+				}
+				},
+				zoom: {
+					enabled: true
+				}
+			};
+		});
+
+		it("check on wheel zooming", () => {
+			const internal = chart.internal;
+			const eventRect = chart.$.main.select(`.${CLASS.eventRect}`).node();
+			const value = args.data.columns[0][2];
+
+			// when zoom in
+			util.fireEvent(eventRect, "wheel", {
+				deltaX: 0,
+				deltaY: -500,
+				clientX: 259,
+				clientY: 137
+			});
+
+			const {x, y} = chart.$.line.circles
+				.filter(d => d.id === "data1" && d.value === value)
+				.node()
+				.getBBox();
+
+			const target = internal.findClosestFromTargets(internal.data.targets, [x, y]);
+
+			expect(target && target.value === value).to.be.true;
+		});
 	});
 });
diff --git a/src/data/data.js b/src/data/data.js
@@ -671,7 +671,7 @@ extend(ChartInternal.prototype, {
 		const xIndex = isRotated ? 1 : 0;
 		const yIndex = isRotated ? 0 : 1;
 		const y = $$.circleY(data, data.index);
-		const x = $$.x(data.x);
+		const x = ($$.zoomScale || $$.x)(data.x);
 
 		return Math.sqrt(Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2));
 	},

diff --git a/src/internals/text.js b/src/internals/text.js
@@ -93,14 +93,13 @@ extend(ChartInternal.prototype, {
 
 	/**
 	 * Redraw chartText
+	 * @param {Function} x Positioning function for x
+	 * @param {Function} y Positioning function for y
+	 * @param {Boolean} forFlow
+	 * @param {Boolean} withTransition transition is enabled
 	 * @private
-	 * @param {Number} x Attribute
-	 * @param {Number} y Attribute
-	 * @param {Object} options.flow
-	 * @param {Boolean} indicates transition is enabled
-	 * @returns {Object} $$.mainText
 	 */
-	redrawText(xForText, yForText, forFlow, withTransition) {
+	redrawText(x, y, forFlow, withTransition) {
 		const $$ = this;
 		const t = getRandom();
 		const opacityForText = forFlow ? 0 : $$.opacityForText.bind($$);
@@ -111,8 +110,8 @@ extend(ChartInternal.prototype, {
 
 				// do not apply transition for newly added text elements
 				(withTransition && text.attr("x") ? text.transition(t) : text)
-					.attr("x", xForText)
-					.attr("y", yForText)
+					.attr("x", x)
+					.attr("y", y)
 					.style("fill", $$.updateTextColor.bind($$))
 					.style("fill-opacity", opacityForText);
 			})
@@ -164,13 +163,15 @@ extend(ChartInternal.prototype, {
 	 */
 	generateXYForText(indices, forX) {
 		const $$ = this;
+		const types = Object.keys(indices);
 		const points = {};
 		const getter = forX ? $$.getXForText : $$.getYForText;
 
-		Object.keys(indices).concat("radar")
-			.forEach(v => {
-				points[v] = $$[`generateGet${capitalize(v)}Points`](indices[v], false);
-			});
+		$$.hasType("radar") && types.push("radar");
+
+		types.forEach(v => {
+			points[v] = $$[`generateGet${capitalize(v)}Points`](indices[v], false);
+		});
 
 		return function(d, i) {
 			const type = ($$.isAreaType(d) && "area") ||