在d3和angular中显示数据点数组的圆吗？

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

@Component({
  selector: 'app-data-visualization',
  template: '<svg></svg>',
  styleUrls: ['./data-visualization.component.css']
})
export class DataVisualizationComponent implements OnInit {
  private dataPoints: number[] = [10, 20, 30, 40, 50];
  private svgElement: any;

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    this.svgElement = d3.select(this.elementRef.nativeElement)
      .select('svg')
      .attr('width', 500)
      .attr('height', 200);

    this.drawCircles();
  }

  private drawCircles() {
    const circles = this.svgElement.selectAll('circle')
      .data(this.dataPoints)
      .enter()
      .append('circle')
      .attr('cx', (d, i) => i * 50 + 25)
      .attr('cy', 100)
      .attr('r', (d) => d)
      .attr('fill', 'steelblue');
  }
}