D3它能提供什么？【下】

通过前两篇的介绍，我们已经了解了D3.js最为核心的东西--使用数据驱动的方式操作DOM元素，并且我们说，只要掌握了它就学会了D3.js。或许你心里在想，等等，为什么你已经明白了前两篇的内容，却依然还不能使用D3开发图表呢？为什么还不能玩弄数据可视化于掌心呢？为什么还不能发家致富然后买辆特斯拉呢？为什么……？我想主要有三方面的原因：

1. 基础知识欠缺，如SVG、CSS、初中数学等知识还没有很好的掌握，；
2. 经验不足，很多问题都需要经历与练习才知道如何解决；
3. D3提供的其它东西还没有掌握
   前两条就不用多说了，需要自己头悬梁锥刺股地不断练习，但是第三条是什么鬼？D3不就是Dava-Driven DOM吗？它不就是数据驱动DOM吗？还有什么其它东西？
   是的，使用数据驱动的方式操作DOM元素是D3的核心本质，但从代码量上来讲它最多也就占2成，还有其他的东西占了8成。这8成是什么东西？你可以想象，当你帅气地将正常人无法理解的数据转变成可视的、普通智力就能明白的、牛逼的图表时会遇到各种问题，如数据如何分布在有限的空间范围、如何排列布局、甚至是如何绘制形状，这些都是虽然不困难（当然有一些也是比较困难的）但却很麻烦的内容，想要处理好它们可不算轻松。D3也明白这些，所以他提供了大量的内容来帮你方便的处理这些问题，而这些东西我称之为工具。
   

工具

D3提供了大量的工具--太多了，我都不知道该从何说起了--解决图表开发过程中的常见问题。其中比较常用的有动画、布局、形状、比例尺、事件等几种类型，与这些类型相关的模块大致如下

动画

• d3-transition

  主要用于状态改变时的动画过渡效果，使用起来比较简单，selection.transition()方法即可创建一个过渡动画，然后使用与操作dom相同的api（attr,style等）设置属性的目标状态值即可

• d3-ease

  动画缓冲函数，定义了各种常用的缓冲类型

• d3-timer

  高效的时间定时器，可用于执行自己的动画等内容

布局

• d3-chord

  弦布局，可用于表现点与点之间流量大小类型的数据

• d3-force

  力导向布局，通过模拟各种力学展现节点与关系数据，有比较好的动态效果，也是大家用得比较多的一种布局

• d3-hierarchy 层级布局

  层级布局，用于表现有层级关系的数据，主要有树形图、簇状图等

形状

• d3-shape

  这个模块中定义了很多常用形状，可以方便的生成形状所需的属性数据，如弧、饼、线、区域等。这些形状也可以直接在画布（Canvas）上绘制出来。

• d3-path

  使用画布（Canvas）的路径api方式生成svg中的路径指令字符串（path的d属性）

• d3-polygon

  多边形相关操作，如计算面积、求中心点、判断是否包含某个点等

比例尺

• d3-scale

  这个应该是我们最常用的模块之一了，主要用于映射数据值的范围与图上的空间范围

• d3-axis

  坐标轴，可以方便的根据数据生成常用的坐标轴，坐标轴单位可以是时间等你需要的单位或数值

事件

• d3-dispatch

  自定义事件分发机制，可方便的创建自己需要的事件分发器。利用事件机制可以很好的解耦代码。

• d3-drag

  拖拽事件，使用比较多的事件类型，可以方便实现拖拽效果

• d3-zoom

  缩放及整体拖动（pan）事件

小结

今天我们简单介绍了D3提供的常用工具，但并没有详细说明，因为任何一个内容详细的展开说都需要比较长的篇幅，以后我们会具体的介绍这些工具的使用方法。查看官方文档是学习使用这些工具的最佳途径，所以大家最好去翻看一下官方文档对各个工具的解释说明。
由于工具内容比较丰富，要记住每个api的具体用法太困难也没有必要，因为文档都是在线的，可以随时查看。虽然我不主张大家去记api，但我们一定要知道有哪些方面的工具可以使用，这样即使我们记不住具体api的名字或参数信息，也能够有的放矢地去查找，而不会像无头苍蝇一样到处乱撞。

---

欢迎大家关注我的微信公众号

var_web