ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# d3绘制图表 图表,用于展示数据,那么需要将数值映射到图形中,比如需要绘制折线图,y值的范围0-100,图表的高度是100,那么y值50可以投影到图表高度50位置,随着数据变化,y值取值范围变为0-1000呢?当然不可能将图表的高度改为1000吧,所以我们需要使用比例尺d3-scales。折线图等等需要显示刻度的坐标轴,我们可以直接使用d3-axis。 常见的图表有: 这一章我希望读者可以理解图表的绘制的过程及思路 1. 需要绘制什么样的图表,什么样的数据。 2. 分析是否需要借助d3进行布局计算。如:tree,stacks 3. 拆分细化图表到d3.shape,或者通过svg基础形状标签。 4. 通过一直需要的shape,分析需要使用哪些相关的比例尺,及数据转化。 5. 分析交互,是否需要使用拖拽等等。 分析完成后绘制: 1. 转化数据 2. 是否使用d3进行布局计算 3. 构建比例尺 4. 构建必要标签g进行分组 5. 绘制图表非数据相关,如坐标轴,图例等等 6. 绑定数据,绘制图形 7. 添加拖拽等功能,自定添加tooltip等等