fix(internals): Fix unexpected initClip() call

- side-effect call from the treemap implementation #3012 - revert .initCall() call Fix #3035
naver · Jan 13, 2023 · 162fbf7 · 162fbf7
1 parent 802a570
commit 162fbf7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 20 deletions.
diff --git a/src/ChartInternal/ChartInternal.ts b/src/ChartInternal/ChartInternal.ts
@@ -285,9 +285,9 @@ export default class ChartInternal {
 			$$.point = $$.generatePoint();
 		}
 
-		$$.initClip();
-
 		if (state.hasAxis) {
+			$$.initClip();
+
 			format.extraLineClasses = $$.generateExtraLineClass();
 			format.dataTime = config.data_xLocaltime ? d3TimeParse : d3UtcParse;
 			format.axisTime = config.axis_x_localtime ? d3TimeFormat : d3UtcFormat;

diff --git a/src/ChartInternal/internals/clip.ts b/src/ChartInternal/internals/clip.ts
@@ -7,22 +7,20 @@ import {document, window} from "../../module/browser";
 export default {
 	initClip(): void {
 		const $$ = this;
-		const {clip, hasAxis} = $$.state;
+		const {clip, datetimeId} = $$.state;
 
 		// MEMO: clipId needs to be unique because it conflicts when multiple charts exist
-		clip.id = `${$$.state.datetimeId}-clip`;
-
-		if (hasAxis) {
-			clip.idXAxis = `${clip.id}-xaxis`;
-			clip.idYAxis = `${clip.id}-yaxis`;
-			clip.idGrid = `${clip.id}-grid`;
-
-			// Define 'clip-path' attribute values
-			clip.path = $$.getClipPath(clip.id);
-			clip.pathXAxis = $$.getClipPath(clip.idXAxis);
-			clip.pathYAxis = $$.getClipPath(clip.idYAxis);
-			clip.pathGrid = $$.getClipPath(clip.idGrid);
-		}
+		clip.id = `${datetimeId}-clip`;
+
+		clip.idXAxis = `${clip.id}-xaxis`;
+		clip.idYAxis = `${clip.id}-yaxis`;
+		clip.idGrid = `${clip.id}-grid`;
+
+		// Define 'clip-path' attribute values
+		clip.path = $$.getClipPath(clip.id);
+		clip.pathXAxis = $$.getClipPath(clip.idXAxis);
+		clip.pathYAxis = $$.getClipPath(clip.idYAxis);
+		clip.pathGrid = $$.getClipPath(clip.idGrid);
 	},
 
 	getClipPath(id: string): string | null {

diff --git a/src/ChartInternal/shape/treemap.ts b/src/ChartInternal/shape/treemap.ts
@@ -66,8 +66,11 @@ function convertDataToTreemapData(data: IData[]): ITreemapData[] {
 export default {
 	initTreemap(): void {
 		const $$ = this;
-		const {$el, state: {current: {width, height}, clip}} = $$;
-		const clipId = clip.id;
+		const {$el, state: {
+			current: {width, height}, clip, datetimeId
+		}} = $$;
+
+		clip.id = `${datetimeId}-clip`;
 
 		$$.treemap = d3Treemap()
 			.tile($$.getTreemapTile());
@@ -83,13 +86,13 @@ export default {
 
 		$el.defs
 			.append("clipPath")
-			.attr("id", clipId)
+			.attr("id", clip.id)
 			.append("rect")
 			.attr("width", width)
 			.attr("height", height);
 
 		$el.treemap = $el.main.select(`.${$COMMON.chart}`)
-			.attr("clip-path", `url(#${clipId})`)
+			.attr("clip-path", `url(#${clip.id})`)
 			.append("g")
 			.classed($TREEMAP.chartTreemaps, true);