8、构建 React 图表与状态管理：从基础到实践

构建 React 图表与状态管理：从基础到实践

1. 构建直方图

在构建直方图时，我们需要对样式和数据进行处理。以下是相关步骤：

1.1 样式设置（Histogram.scss）

在 SCSS 文件中，我们为 div 设置了一些内边距，同时为滑块和 SVG 文本颜色设置了属性。代码如下：

.histogram {
  padding-top: 50px;
}
.sliderDiv {
  width: 400px;
  padding-left: 50px;
  padding-top: 20px;
}
svg text {
  fill: white;
}

1.2 数据处理与组件集成（App.tsx）

在 App.tsx 中，我们将直方图组件集成进来，并进行数据处理。具体步骤如下：
1. 导入必要的库和组件 ：

import React, { useEffect } from 'react'
import './App.scss'
import * as d3 from 'd3'
import Histogram from './components/Histogram/Histogram'
import { Types } from './components/Histogram/types'