刚开始接触 D3,很容易会联想到 jQuery,因为他们在操作元素的语法很相似。网上有这样一个问
Github 有中文 API 文档,这里只贴出目录供参考,详细信息请查看 API 文档。
- Arrays (静态, 查询, 变换计算, 直方图)
- Axes 基于比例尺提供人类友好的标尺刻度
- Brushes 使用鼠标或触摸选择一维或二维区域
- Chords 和弦图
- Collections (Objects, Maps, Sets, Nests -- 根据指定的规则将数组重组为层次结构)
- Colors 颜色空间以及转换
- Color Schemes 用于定量,序数和分类比例尺的颜色渐变和调色板
- Contours
- Dispatches 使用命名回调函数分离关注点
- Dragging 使用鼠标或触摸输入拖放 SVG, HTML 或者 Canvas
- Delimiter-Separated Values 解析和格式化以分隔符隔开的特定格式文件或字符串,大多数情况下指 CSV 和 TSV
- Easings 平滑过渡的过渡函数
- Fetches 基于 Fetch API 的更为便捷的获取数据方法
- Forces 使用速度 Verlet 积分的力模型仿真布局
- Number Formats 对人类友好的数值格式化
- Geographies 地理投影, 形状以及数学计算(Paths, Projections, Spherical Math, Spherical Shapes, Streams, Transforms)
- Hierarchies 对层次数据进行可视化的一些布局算法
- Interpolators 对数值、颜色、字符串、数组、对象等进行插值
- Paths 将 Canvas 路径命令序列化为 SVG 路径字符串
- Polygons 二维多边形的几何操作
- Quadtrees 四叉树, 二维空间递归细分
- Random Numbers 基于多种多样的分布模型生成随机数
- Scales 将抽象数据映射到可视化表示的编码(Continuous, Sequential, Quantize, Ordinal)
- Selections 通过选择元素和绑定数据对 DOM 元素进行修改或变换(Selecting, Modifying, Data, Events, Control, Local Variables, Namespaces)
- Shapes 可视化基本图元(Arcs 圆形或环形, Pies 饼图或者环形图, Lines 曲线或折线, Areas 面积图, Curves 曲线, Links 圆滑三次 Bézier 曲线, Symbols 分类形状编码, Stacks 堆叠图)
- Time Formats 受 strptime 和 strftime 启发,时间类型的解析个格式化
- Time Intervals 按照人类对日期的计算方式实现的日期计算
- Timers 一个高效的可以用来管理上千并发动画的队列
- Transitions 对 selections 进行动画过渡
- Voronoi Diagrams 根据指定的一组点集计算其泰森多边形
- Zooming 使用触摸鼠标或者触摸面板缩放 SVG, HTML 或者 Canvas
看到这个目录确实有点头痛,更何况每个模块又有分项列表,很多方法。我个人的学习路径是:
- 略读一遍所有方法名称及其用途
- 将所有模块按照自己的理解进行分类,因为方法狠多,全部理解并记住不可行亦无必要。将模块再次分类后,做到对 D3 的操作有印象,需要用到的时候知道那个类有哪个方法,再去查阅 API 文档进行开发。
- 定好目标,不需要太难,自己动手做一个 demo 练习下,这个过程很重要,可以锻炼查阅 API 文档的能力
这里附上我的分类,仅供参考:
分类 | 模块 |
---|---|
⭐️ 计算类 | Arrays, Collections, Hierarchies, Polygons, Quadtrees, Random Numbers, |
⭐️ 数据处理类 | Dispatches, Delimiter-Separated Values, Fetch, Number Formates, Interpolators, Paths |
⭐️ 时间处理类 | Time Formates, Time Intervals, Timers |
⭐️ DOM 操作类 | Selections |
⭐️ 动画类 | Easings, Transitions |
👑 颜色类 | Color, Color Schemes, |
👑 鼠标控制 | Brushes, Dragging, Zooming |
👑 地理类 | Geographies |
👑 比例调整类 | Axes, Scales, |
👑 图形类 | Shapes, Voronoi Diagrams, Contours, Forces, Chords |
-
前五项 ⭐️ 分类是属于基础模块,也是平时编程会常用(至少有一部分会常用到)的方法,比如 Arrays, Collections, Fetch... Selection 对应 jQuery, 动画类对应 CSS3. 差不多减少了一半学习量。
-
后面五个 👑 分类是需要额外学习的了,其中鼠标控制类最简单,图形类最难。
5. 官方画廊
点开 官方画廊 的示例,发现下面的代码根本看不懂
原来 Observable 是一个在线开发编辑 D3 的工具,它的语法同我们平时开发是有些差异的。快速了解 Observable -- 『干货|d3创始人又一力作:不仅能在线写D3.js,还能让你写的更出色 』。
另附 Observable: The User Manual 用户使用手册
作者:MercuryWang
链接:http://events.jianshu.io/p/9bcaa95a69e3
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。