D3.js 系列 (一) D3 简介 + Observable -- D3 在线开发编辑工具简介

刚开始接触 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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。