From 4545e4b26befe9c55155e4dcd85f8063476d8174 Mon Sep 17 00:00:00 2001 From: YuHyun Date: Thu, 7 Dec 2023 23:28:45 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20Graph=20>=20=EB=8D=B0=EC=9D=B4=ED=84=B0?= =?UTF-8?q?=EA=B0=80=20=EC=97=86=EC=9D=84=20=EB=95=8C=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [#249] --- .../frontend/src/components/graph/Graph.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/frontend/src/components/graph/Graph.tsx b/packages/frontend/src/components/graph/Graph.tsx index 121fd749..7ade370f 100644 --- a/packages/frontend/src/components/graph/Graph.tsx +++ b/packages/frontend/src/components/graph/Graph.tsx @@ -17,18 +17,25 @@ type AddedLineType = { }; function renderD3(svgRef: RefObject, data: InitialDataProps[]) { - if (!data.length) { - return; - } - const { parsedData, additionalLinks } = parsingMultipleParents(data); const addedLine: AddedLineType[] = []; + // Select the root of the tree and bind the data + const svg = d3.select(svgRef.current); + + if (!parsedData.length) { + svg.select("#text").selectAll("*").remove(); + svg.select("#link").selectAll("*").remove(); + svg.select("#node").selectAll("*").remove(); + return; + } + // Stratify the data const stratify = d3 .stratify() .parentId((d) => d.parentId) .id((d) => d.id); + const rootNode = stratify(parsedData); // Create a tree layout @@ -38,9 +45,6 @@ function renderD3(svgRef: RefObject, data: InitialDataProps[]) { const treeData = treeLayout(rootNode); fillColor(treeData); - // Select the root of the tree and bind the data - const svg = d3.select(svgRef.current); - // Add text next to each node svg .select("#text")