fix: Graph > text, line, circle 쌓임 문제

[#257]
boostcampwm2023 · Dec 7, 2023 · c4e7b6d · c4e7b6d
1 parent 519ed79
commit c4e7b6d
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/frontend/src/components/graph/Graph.tsx b/packages/frontend/src/components/graph/Graph.tsx
@@ -37,6 +37,7 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
 
   // Add text next to each node
   svg
+    .select("#text")
     .selectAll("text")
     .data(treeData.descendants())
     .join(
@@ -65,6 +66,7 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
 
   // Draw edges (links) between nodes
   svg
+    .select("#link")
     .selectAll("line")
     .data([...treeData.links(), ...addedLine])
     .join(
@@ -83,6 +85,7 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
     .style("opacity", 1);
 
   svg
+    .select("#node")
     .selectAll("circle")
     .data(treeData.descendants())
     .join(
@@ -127,7 +130,11 @@ export function Graph({ className }: GraphProps) {
   return (
     <div className={className}>
       <svg width="100%">
-        <g ref={gRef} transform="translate(100,70)" />
+        <g ref={gRef} transform="translate(100,70)">
+          <g id="link" />
+          <g id="node" />
+          <g id="text" />
+        </g>
       </svg>
       <button type="button" onClick={handleNewData}>
         click