使用angular 7访问d3内部的'this‘回调

在Angular中使用D3时，需要注意this关键字的上下文

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    this.createSvg();
  }

  createSvg() {
    const svg = d3.select('body').append('svg')
      .attr('width', 500)
      .attr('height', 500);

    svg.selectAll('circle')
      .data([{x: 50, y: 50}, {x: 100, y: 100}])
      .enter()
      .append('circle')
      .attr('cx', (d) => d.x)
      .attr('cy', (d) => d.y)
      .attr('r', 20)
      .attr('fill', 'blue')
      .on('click', this.handleClick);
  }

  handleClick(event: MouseEvent, d: any) {
    console.log('Circle clicked', event, d);
  }
}

在这个例子中，我们在Angular组件中创建了一个SVG元素，并为其添加了两个圆形。我们还在每个圆形上绑定了一个点击事件处理器handleClick。

注意，在createSvg方法中，我们将handleClick方法直接传递给D3的.on()方法。在这种情况下，this关键字将指向Angular组件实例，因此我们可以访问组件的属性和方法。

然而，在某些情况下，this关键字的上下文可能会改变。为了避免这种情况，我们可以使用箭头函数来确保this指向正确的上下文：

svg.selectAll('circle')
  .data([{x: 50, y: 50}, {x: 100, y: 100}])
  .enter()
  .append('circle')
  .attr('cx', (d) => d.x)
  .attr('cy', (d) => d.y)
  .attr('r', 20)
  .attr('fill', 'blue')
  .on('click', (event: MouseEvent, d: any) => this.handleClick(event, d));

在这个修改后的例子中，我们使用了箭头函数来确保this关键字指向Angular组件实例。这样，我们就可以在handleClick方法中访问组件的属性和方法。