0

Доброго времени суток

Использую D3 с React'ом через react-faux-dom. Возникла идея создавать D3 компоненты и грузить их через реакт компоненты, но ошибок никаких нет и просто выводит пустой svg.

Накидал простенький пример. Структура вот такая:

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

Файл Brush.js:

import { useEffect } from "react";
import * as d3 from "d3";
import { withFauxDOM } from "react-faux-dom";

const Brush = () => {
  useEffect(() => {
    d3.select("svg")
      .append("g")
      .call(d3.brushX().extent([[0, 0], [200, 200]]));
  });
  return;
};

export default withFauxDOM(Brush);

Файл G.js:

import { useEffect } from "react";
import * as d3 from "d3";
import { withFauxDOM } from "react-faux-dom";

const G = () => {
  useEffect(() => {
    d3.select("svg").append("g");
  });
  return;
};

export default withFauxDOM(G);

Файл Svg.js:

import ReactFauxDOM, { withFauxDOM } from "react-faux-dom";

const Svg = () => {
  const createSVG = new ReactFauxDOM.createElement("svg");

  return createSVG.toReact();
};

export default withFauxDOM(Svg);

Файл App.js:

import React from "react";
import Svg from "./Components/Svg";
import G from "./Components/G";
import Brush from "./Components/Brush";

const App = () => {
  return (
    <Svg>
      <G>
        <Brush />
      </G>
    </Svg>
  );
};

export default App;

Ну и в index.js просто делаем ReactDOM.render

Буду признателен любой подсказке

1 ответ 1

1

Дело в том что из компонентов wrappers, которые расположены над вложенными компонентами ничего не возвращается. Надо попробовать добавить return props.children;

const G = (props) => {
  useEffect(() => {
    d3.select("svg").append("g");
  });
  return props.children;
};

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.