Я пытаюсь создать повторно используемый компонент D3, который я могу использовать в качестве фона для своих графиков, и моя цель - рисовать поверх этого. Предположим, что этот фон - цветной прямоугольник.
Я смог создать компонент D3 для этого с помощью Hooks. Причина, по которой я использую forwardRef ниже, заключается в том, что я хотел использовать ту же ссылку в других моих компонентах.
import React, { useEffect } from 'react';
import * as d3 from 'd3';
const ChartBackground = React.forwardRef(({ width, height }, ref) => {
useEffect(() => {
const svg = d3.select(ref.current);
g.append('rect')
.attr('width', width)
.attr('height', height)
.attr('fill', '#eee');
}, [width, height, ref]);
return (
<svg width={width} height={height} id="background">
<g ref={ref} />
</svg>
);
});
export default ChartBackground;
В основном компоненте я могу использовать это следующим образом:
const ref = React.createRef();
<ChartBackground width={500} height={500} ref={ref} />
Теперь я хочу, скажем, создать компонент Text
и добавить текст поверх фона. Поэтому мне нужно использовать тот же g
. Чтобы сделать это, я попытался это сделать:
import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
const ChartText = React.forwardRef(({ text }, parentRef) => {
const ref = useRef(parentRef);
useEffect(() => {
const g = d3.select(ref.current);
g.append('text').text(text);
}, [text]);
return <g ref={ref} />;
});
export default ChartText;
Я прошел тот же реф:
const ref = React.createRef();
<ChartBackground width={500} height={500} ref={ref} />
<ChartText text="Hello World" />
Ну, проблема в том, что ChartText
возвращает еще один <g>
, и это происходит сразу после ChartBackground
один. Это выглядит так:
Таким образом, я не могу использовать тот же g и не могу добавить текст поверх прямоугольника. Мне как-то нужно использовать тот же svg, выбрать g прямоугольника и добавить добавить текст к этому g. Я не смог этого сделать.