feat: 노드 hover시에 툴팁 삭제되게 구현

[boostcampwm2023#254]
flydog98 · Dec 14, 2023 · 21bee84 · 21bee84
1 parent 5239699
commit 21bee84
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/packages/frontend/src/components/graph/Graph.tsx b/packages/frontend/src/components/graph/Graph.tsx
@@ -106,6 +106,17 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
       "fill",
       (d: d3.HierarchyPointNode<InitialDataProps>) => d.data?.color ?? "",
     );
+
+  svg.select("#node").on("mouseout", (event) => {
+    const nodeNotHovered = !(
+      event.relatedTarget.nodeName === "rect" ||
+      event.relatedTarget.nodeName === "tspan"
+    );
+
+    if (nodeNotHovered) {
+      svg.select("#tooltip").remove();
+    }
+  });
 }
 
 interface GraphProps {

diff --git a/packages/frontend/src/components/graph/renderTooltip.ts b/packages/frontend/src/components/graph/renderTooltip.ts
@@ -21,7 +21,7 @@ export default function renderTooltip(
     position: `translate(${d.x - 110},${d.y - 60})`,
   };
 
-  const transparentRectPosition = "translate(85, 40)";
+  const transparentRectPosition = "translate(95, 40)";
 
   const tooltipDataFormat = [
     {
@@ -61,7 +61,7 @@ export default function renderTooltip(
     // 요기나
     .attr("fill", "transparent")
     // 요기 바꿔보심 돼여
-    // .attr("stroke", color.$scale.grey300)
+    .attr("stroke", color.$scale.grey300)
     .attr("transform", transparentRectPosition);
 
   tooltip
@@ -91,6 +91,9 @@ export default function renderTooltip(
       if (!currentValueNode.empty() && currentValueNode.node()) {
         const tspanMaxWidth = 110;
         const originalText = currentValueNode.text();
+        if (currentValueNode.node()!.getComputedTextLength() < tspanMaxWidth) {
+          return;
+        }
 
         let start = 0;
         let end = tspanMaxWidth;