Logo

总结

对你D3学习旅程的总结以及给学员们的结语。

概念

总结

对你D3学习旅程的总结以及给学员们的结语。

你所学到的内容

让我们通过一个简要总结来结束本课程的学习内容。


我们从一个简单的图表开始探索 D3 的世界。你学会了如何调整图表的边距,以及如何格式化横轴上显示的时间日期。最初,图表仅包含坐标轴上的数值和一条展示数据的线条。你掌握了如何对数据域(横轴)和范围(纵轴)进行缩放。

基本图表
基本图表

接着,你为图表添加了更多元素,如坐标轴标签和标题。然后,你将简单的折线图改造成散点图和虚线图。你还学习了如何为折线图应用多种平滑函数,并为图表的不同区域填充颜色。此外,你学会了如何将单线条图表扩展为带有独立坐标轴的多线图表,并为每条线添加标签。

带标题的基本图表
带标题的基本图表

随后,你深入学习了 D3 中的各种图形元素,包括圆形、矩形、椭圆、直线、路径、文本和点的绘制方法。你还掌握了如何为这些元素应用不同的样式并自定义其属性。

D3 元素
D3 元素

你进一步学习了多种数据可视化技术,包括柱状图、直方图、树状图、桑基图、子弹图和差异图。你还学习了如何使用 D3 绘制地图,如何添加缩放与平移功能,并根据坐标显示数据点。

子弹图、桑基图、直方图和差异图
子弹图、桑基图、直方图和差异图

最后,你掌握了一些实用技巧,巩固了之前所学内容。这包括为图表添加悬停提示(tooltip),为线条或区域添加渐变色彩。你还学习了如何为元素添加动画过渡效果,并通过各种输入方式动态调整其属性。最后,你通过多个实例了解了 D3 的强大功能。

带悬停提示的图表
带悬停提示的图表

最后提醒

恭喜你完成本课程!这是一段漫长的旅程,但你已成功抵达终点。希望这段学习经历对你有所收获,也期待它达到了你的预期。

感谢你加入本课程的学习社区。

D3.js 示例详解