fix: Graph > 데이터가 없을 때 삭제되지 않는 문제

[#249]
boostcampwm2023 · Dec 7, 2023 · 4545e4b · 4545e4b
1 parent 622c38c
commit 4545e4b
Showing 1 changed file with 11 additions and 7 deletions.
diff --git 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<SVGGElement>, 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<InitialDataProps>()
     .parentId((d) => d.parentId)
     .id((d) => d.id);
+
   const rootNode = stratify(parsedData);
 
   // Create a tree layout
@@ -38,9 +45,6 @@ function renderD3(svgRef: RefObject<SVGGElement>, 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")