diff --git a/packages/frontend/src/components/graph/Graph.tsx b/packages/frontend/src/components/graph/Graph.tsx index 49e2ad97..a07661fd 100644 --- a/packages/frontend/src/components/graph/Graph.tsx +++ b/packages/frontend/src/components/graph/Graph.tsx @@ -106,6 +106,17 @@ function renderD3(svgRef: RefObject, data: InitialDataProps[]) { "fill", (d: d3.HierarchyPointNode) => 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 index 75eece69..461979fa 100644 --- 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;