5、React与D3：图表创建与动画实现

最新推荐文章于 2025-11-15 00:13:36 发布

root9

最新推荐文章于 2025-11-15 00:13:36 发布

阅读量35

点赞数

CC 4.0 BY-SA版权

分类专栏： React与D3数据可视化文章标签： React D3 图表创建

本文链接：https://blog.youkuaiyun.com/root9/article/details/151108004

React与D3数据可视化专栏收录该内容

18 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

React与D3：图表创建与动画实现

1. D3鼠标事件

在示例中，我们将使用D3替代React JSX来实现设置带有鼠标事件的圆形功能。
- 代码实现 ：

// 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