Reactjs D3 React-在使用新位置绘制路径之前，无法删除路径映射

我试图在React中使用D3以编程方式绘制SVG路径图。每次我渲染一个新的路径贴图时，之前绘制的路径都不会从DOM中删除

我尝试了所有的建议，但没有一个有效

当我单击一个按钮时，一个新节点被添加到一个数组中，D3从它的起点绘制一个SVG路径。但在渲染时，以前绘制的线仍会显示

这是我的密码：

useffect（（）=>{
常量svg=d3
.select（svgRef.current）
.attr（'viewBox'，'0 0${availablehorizontalspace}${availablehorizontalspace}`）；
svg.select（'path'）.remove（）；//这不起作用
svg.selectAll（“*”）.remove（）；//使用此
如果（矩形长度>0）{
矩形forEach（（_el，idx）=>{
常数线=d3
.第（）行
.x（（值，索引）=>200*索引）
.y（（值）=>数字（值））；
svg
.selectAll（`.node[nodeid='${nodes[idx][0].id}]`）
.data（[rects]）
.join（'路径'）
.attr（'d'，（值：（数字[]| Iterable）[]）=>{
返回行（值[idx]）；
});
});
}
}，[rects]）；

稍后在JSX中：

const nodepathithid=（props:nodepathithid）：ReactElement=>{
返回（）；
};
...
{rects.length>0&&rects.map（（el，idx）=>(
{svgRef.current=ref；}}
样式={{position:'absolute'}}
key={`y${nodes[idx][0].id}`}
>
))}

如何更新SVG以删除旧路径，以便在

rects

数组中只有路径数

更新： 下面的一些图片演示了该问题： 第一次点击 第二次点击：

---

为什么要渲染多个

s？您可以将所有路径放在一个路径下…嗨@MichaelRovinsky，谢谢-我尝试将其存储为引用，但在第一次渲染时它不会渲染。我曾在其他地方尝试过，但同样的问题仍然存在。考虑到需要访问svg ref，您建议我将其放在何处？添加了一些上下文屏幕截图