使用D3实现ReactJS嵌入Svg图像

import React from 'react';
import * as d3 from 'd3';
import { ReactComponent as SvgComponent } from './path/to/svg/file.svg';

class MyComponent extends React.Component {
  componentDidMount() {
    // 使用D3选择器选择Svg组件
    const svg = d3.select('.svg-component');

    // 假设有一个数据数组
    const data = [10, 20, 30, 40, 50];

    // 使用D3的数据绑定功能将数据与Svg元素绑定
    const circles = svg.selectAll('circle')
      .data(data);

    // 根据数据动态生成圆形
    circles.enter()
      .append('circle')
      .attr('cx', (d, i) => i * 50 + 25)
      .attr('cy', 50)
      .attr('r', (d) => d)
      .attr('fill', 'steelblue');
  }

  render() {
    return (
      <div>
        <SvgComponent className="svg-component" />
      </div>
    );
  }
}