Доброго времени суток
Использую 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
Буду признателен любой подсказке