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")