D3.js React D3树形图不正确的重新招标

我开始将React与D3集成，其中我使用React表示DOM，使用D3表示数学。我的用例是创建一个树形图，其中子对象是可折叠的

因为我使用React来呈现DOM，所以我尝试使用

setState

来触发对“折叠”子节点的重新渲染，但是我遇到了一些问题

1。它无法正确定位节点和路径

2。当我“展开”子节点时，它们被放置在错误的位置

这是树的初始状态。一切看起来都很好

然后我点击Level2:A，它会折叠它的子节点，但是节点和路径不合适

然后，当我折叠顶级而级别2:A折叠并展开时，我得到以下结果

以下是指向我的代码的链接：。如果有人有任何见解，我们将不胜感激

---

谢谢

只需在子对象中的文本中添加两个\u00A0（反斜杠uA00A0），以便在文本开头插入空格

您的代码笔不会wrk@Cyril现在应该可以用了。如果你有什么想法，请告诉我谢谢。你能找到解决办法吗？@panw对空间没有问题，问题是线条的渲染。