执行

1. yarn
2. yarn start

思考：

拿到需求后，开始着手分析需求：

1. 加载数据：提供了两个CSV文件，查看文件内容，发现两个表格中的type和type， category和id是相对应的。所以第一步是加载两个csv的数据，然后进行组装合并。本地读取csv文件可以使用： D3, csvtojson。因后续有图表需求，所以选择采用D3。更好的方法是node读取csv，然后存储到数据库，后续添加账单时，方便存储。
2. 按月份筛选： 需要日期选择控件，精确到月。根据所选月份对数据进行过滤。数据的展示采用表格形式，选择引入antd。
3. 添加账单： 1. 不存储数据，直接添加到处理后的数据中即可。 2. 存储数据： 前后端交互方式； 通过jsontocsv库反写到本地。本次采用不存储数据。
4. 展示所选月份的收入和支出总总额： 通过饼图进行分类展示，中间区域为总支出/总收入的展示，点击中间，切换支出/收入。
5. 分类的二次筛选： 表格增加筛选函数，并获取所有的分类信息。
6. 支出金额统计，并进行排序。 如第4步，饼图增加排序功能，但因饼图可很明显的看到某一项的占比，所以提供了一个wise的布局方式，可使饼图更美观。

技术方案： 脚手架React-create-app， 技术栈： React, D3, AntD

遇到的问题

1. D3与React的结合： 因工作项目中实际使用的React版本较老，所以本demo中使用hooks相关均需边学边用。D3与React结合过程中，因D3和React均可操作DOM，两者存在冲突的地方。尝试了两种方案后，选择D3生成数据和布局，React操作DOM,因为此种方式可读性更高，而且可享受到React框架内部的优化。
2. 饼图的绘制
   • 给饼图增加注释信息（引线和文字），需要生成折线和文字的位置数据。
   • 注释信息容易叠在一起，需要将注释信息手动排列，错开。
   • 错开后部分情况下仍然不美观，增加了一个wise的布局模式。