如何在ngFor插入的<circle>上d3.select（）？

Question

我正在尝试d3.select()插入一些ngFor的圈子，以便在其上添加点击事件。但由于某种原因，我不知为何无法选择它们。我在做什么错了？

我尝试使用不同的选择器，例如仅"circle"，"circle.connection-point"和"circle.connection-point.ng-star-inserted"

<svg:g [draggable]="temp" [(templateinstance)]="templateinstance">
  <svg #temp class="connection">
    <circle
      *ngFor="let connectionPoints of templateinstance.template.connectionPoints"
      [attr.cx]="connectionPoints[0] + templateinstance.posX"
      [attr.cy]="connectionPoints[1] + templateinstance.posY"
      class="connection-point"
      r="10"
    ></circle>
  </svg>
</svg:g>

testAddLines(containerElement, elementRef, templateinstance: TemplateInstance) {
    console.log('testAddLines initiated');

    var xy0,
      connectionPath,
      connectionInProgress = false,
      line = d3
        .line()
        .curve(d3.curveStepAfter)
        .x(function(d) {
          return d[0];
        })
        .y(function(d) {
          return d[1];
        });

    d3.select(containerElement)
      .selectAll('circle.connection-point')
      .on('click', function() {
        console.log('circle.connection-point');
        connectionInProgress = true;
        xy0 = [
          templateinstance.template.connectionPoints[0][0] + templateinstance.posX,
          templateinstance.template.connectionPoints[0][1] + templateinstance.posY
        ];
        connectionPath = d3
          .select(containerElement)
          .select('path.connection-line')
          .attr('d', line([xy0, xy0]));

        d3.select('svg.canvas').on('mousemove', function() {
          if (connectionInProgress) {
            let mousePos = [d3.event.offsetX, d3.event.offsetY];
            let tempLine = line([xy0, mousePos]);
            connectionPath.attr('d', tempLine);
          }
        });
      });
  }

当我点击类别为console.log的圆圈时，我想触发鼠标点击（并跟随'circle.connection-point.ng-star-inserted'）。