Блог

Главная - Вопросы по программированию - Как выбрать svg дочерний элемент div с помощью d3 select

Как выбрать svg дочерний элемент div с помощью d3 select

#javascript #html #reactjs #d3.js #svg

#javascript #HTML #reactjs #d3.js #svg

Вопрос:

Я назначил ссылку для доступа к моему функциональному компоненту div. Ссылка работает нормально.

Теперь я хочу получить доступ к SVG, используя эту ссылку и d3 select. Однако я сталкиваюсь с проблемами, связанными с этим.

Ниже приведена структура 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>

Ниже приведен созданный мной компонент React.

 const MyFunctionComponent = ({ data }) => {
  const ref = useRef(null);
  let parentDiv;

  useEffect(() => {
    parentDiv = d3.select(ref.current).select("div");
    console.log(parentDiv);
  });

  return (
    <div style="height: 500px;" ref={ref}>
        <ThirdPartyLibraryComponent/>
    </div>
  );
}

консоль.журнал выдает прикрепленный результат:

введите описание изображения здесь

Когда я меняю выделение d3 на: parentDiv = d3.select(ref.current).select("div").select("div");

Я получаю следующий результат:

введите описание изображения здесь

Как я могу правильно получить доступ к SVG?

Вот ссылка на codesandbox

Комментарии:

1. Я не совсем понимаю, что вы пытаетесь здесь сделать, но вам не нужно выбирать каждый элемент по пути. Выделения D3 работают как CSS. Простое написание d3.select(ref.current).select("svg") может сработать.

2. Я пробовал это, но это не работает. Я обновил вопрос ссылкой на мой codesandbox, на случай, если это поможет.

Ответ №1:

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);
  });