5、React与D3结合：图形绘制、事件处理与动画实现

React与D3结合：图形绘制、事件处理与动画实现

1. D3鼠标事件

在这个示例中，我们将使用D3来实现与之前示例相同的功能，即设置一个带有鼠标事件的圆形。

1.1 代码实现

// src/component/CircleWithEvents/CircleWithD3Events.tsx
import * as React from 'react'
import './CircleWithEvents.scss'
import * as d3 from 'd3'

export default class CircleWithD3Events extends React.PureComponent<ICircleWithD3EventsProps> {
  componentDidMount() {
    this.draw()
  }

  onMouseOverHandler(event: React.MouseEvent<SVGCircleElement, MouseEvent>) {
    // alert('onMouseOverHandler')
  }

  onMouseOutHandler() {
    // alert('onMouseOutHandler')
  }

  draw = () => {
    d3.select('svg')
      .append('g')
      .append('circle')
      .attr('transform', 'translate(150, 150)')
      .attr('