D3+javascript+react无法在边缘（链接）上添加标签

在 D3 和 React 中操作图表时，可以使用 D3 和 React 的组合来构建自定义图表。要在边缘上添加标签，可以按照以下步骤进行操作：

1. 在 D3 中，使用 .append("text") 方法创建文本元素，并将其附加到边缘上。

2. 使用 .attr() 方法设置文本元素的属性。例如，可以使用 textAnchor 属性设置标签在边缘的哪一侧，并使用 x 和 y 属性定义文本元素的位置。

3. 将 React 和 D3 结合使用，将 D3 绘制的 SVG 元素嵌入到 React 组件中，使其成为组件的一部分。

代码示例：

import React, { Component } from 'react';
import * as d3 from 'd3';

class Graph extends Component {
  componentDidMount() {
    this.drawChart();
  }

  drawChart() {
    const data = {
      nodes: [
        { name: 'A' },
        { name: 'B' },
        { name: 'C' },
        { name: 'D' },
      ],
      links: [
        { source: 'A', target: 'B' },
        { source: 'B', target: 'C' },
        { source: 'C', target: 'D' },
        { source: 'D', target: 'A' },
      ],
    };

    const width = 400;
    const height = 400;

    const svg = d3
      .select(this.refs.canvas)
      .append('svg')
      .attr('width', width)
      .attr('height', height);

    const simulation = d3
      .forceSimulation()
      .force(
        'link',
        d3.forceLink().id((d) => {
          return d.name;
        })
      )
      .force('charge', d3.forceManyBody().strength(-100))
      .force('center', d3.forceCenter(width / 2, height / 2));

    const link = svg