Рисование поверх SVG в другом компоненте с помощью d3. js - PullRequest
0 голосов
/ 03 марта 2020

Я пытаюсь создать повторно используемый компонент 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 один. Это выглядит так:

enter image description here

Таким образом, я не могу использовать тот же g и не могу добавить текст поверх прямоугольника. Мне как-то нужно использовать тот же svg, выбрать g прямоугольника и добавить добавить текст к этому g. Я не смог этого сделать.

...