Javascript 如何使用d3 select选择div的svg子元素

我已指定一个ref来访问我的功能组件div。裁判工作得很好

现在，我想使用这个ref和d3 select访问SVG。然而，我面临着这样做的问题

下面是我尝试访问的DOM结构：

<div style="height: 500px;">
  <div style="width: 100%; height: 100%;"> <--- Third party DOM starts here
    <div style="position: relative;">
      <svg xmlns="http://www.w3.org/2000/svg" role="img" width="1904" height="500">
      </svg>
    </div>
  </div> <---- Third Party DOM ends here
</div>

{
parentDiv=d3.选择（ref.current）.选择（“div”）；
console.log（parentDiv）；
});
返回(
);
}

console.log提供附加的结果：

当我将d3选择更改为：

parentDiv=d3.选择（ref.current）.选择（“div”）.选择（“div”）

我得到以下结果：


如何正确访问SVG

下面是第三方库尚未将SVG连接到DOM的代码沙盒。因此，我无法找到SVG元素

以下是一个临时解决方案：

  const checkSVGExists = () => {
    if (ref.current) {
      let parentDiv = d3.select(ref.current);
      if (parentDiv.node().querySelector("svg") !== null) {
        let svg = parentDiv.select("svg");
      }
    }
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      checkSVGExists();
    }, 1000);
    return () => clearTimeout(timer);
  });

第三方库尚未将SVG连接到DOM。因此，我无法找到SVG元素

以下是一个临时解决方案：

  const checkSVGExists = () => {
    if (ref.current) {
      let parentDiv = d3.select(ref.current);
      if (parentDiv.node().querySelector("svg") !== null) {
        let svg = parentDiv.select("svg");
      }
    }
  };

  useEffect(() => {
    const timer = setTimeout(() => {
      checkSVGExists();
    }, 1000);
    return () => clearTimeout(timer);
  });

我并没有完全遵循您在这里试图做的事情，但是您不需要在途中选择每个元素。D3选择像CSS一样工作。只需编写
d3.select（ref.current）.select（“svg”）
就可以了。我试过了，但不起作用。我已经用我的codesandbox链接更新了这个问题，以防它有所帮助。我并没有完全按照您在这里试图做的，但您不需要在途中选择每个元素。D3选择像CSS一样工作。只需编写
d3.select（ref.current）.select（“svg”）
就可以了。我试过了，但不起作用。我已经用我的codesandbox链接更新了这个问题，以防万一。