6、使用 React、TypeScript 和 D3 创建基础图表

使用 React、TypeScript 和 D3 创建基础图表

在数据可视化的领域中，使用 React、TypeScript 和 D3 库可以创建出各种各样的图表。下面将详细介绍几种基础图表的创建方法。

折线图

在创建折线图时，我们会用到一些代码来设置线条的属性。例如：

.attr('x1', lastX)
.attr('y1', lastY)
.attr('x2', lastX + x2)
// y Axis is what turn the value to the value needed
// on the chart
.attr('y2', yAxis(300))

对于 SCSS 文件 BasicLineChart.scss ，虽然可以在这里设置绘图元素的属性，但由于通过 props 传递了填充颜色和其他属性，所以暂时不需要设置。不过，为未来使用做好准备是个好习惯。

.basicLineChart {
}

在测试方面，使用 Jest 和 Enzyme 来确保组件能够正确挂载并使用设置的 props。以下是测试代码示例：

// src/component/BasicLineChart/BasicLineChart.test.tsx
import React from 'react'
import { shallow } from 'e