如何使用d3.js和Angular在有向力图中显示边？

<svg #graphContainer></svg>

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'app-force-directed-graph',
  templateUrl: './force-directed-graph.component.html',
  styleUrls: ['./force-directed-graph.component.css']
})
export class ForceDirectedGraphComponent implements OnInit {
  @ViewChild('graphContainer', { static: true }) graphContainer: ElementRef;

  constructor() { }

  ngOnInit(): void {
    this.drawGraph();
  }

  drawGraph(): void {
    const svg = d3.select(this.graphContainer.nativeElement);
    // 在这里使用d3.js创建力图，并将边绘制到SVG容器中
  }
}

drawGraph(): void {
  const svg = d3.select(this.graphContainer.nativeElement);

  const nodes = [
    { id: 1, name: 'Node 1' },
    { id: 2, name: 'Node 2' },
    { id: 3, name: 'Node 3' }
  ];

  const links = [
    { source: 1, target: 2 },
    { source: 2, target: 3 }
  ];

  const simulation = d3.forceSimulation(nodes)
    .force('link', d3.forceLink(links).id(d => d.id))
    .force('charge', d3.forceManyBody())
    .force('center', d3.forceCenter(300, 300));

  const link = svg.selectAll('.link')
    .data(links)
    .enter()
    .append('line')
    .attr('class', 'link');

  const node = svg.selectAll('.node')
    .data(nodes)
    .enter()
    .append('circle')
    .attr('class', 'node')
    .attr('r', 10);

  simulation.on('tick', () => {
    link
      .attr('x1', d => d.source.x)
      .attr('y1', d => d.source.y)
      .attr('x2', d => d.target.x)
      .attr('y2', d => d.target.y);

    node
      .attr('cx', d => d.x)
      .attr('cy', d => d.y);
  });
}