你好,我是月影。
上一节课,我们使用图表库实现了一些常用的可视化图表。使用图表库的好处是非常简单,基本上我们只需要准备好数据,然后根据图形需要的数据格式创建图形,再添加辅助插件,就可以将图表显示出来了。
图表库虽然使用上简单,但灵活性不高,对数据格式要求也很严格,我们必须按照各个图表的要求来准备数据。而且,图形和插件的可配置性,完全取决于图表库设计者开放的 API,给开发者的自由度很少。
今天,我们就来说说,使用数据驱动框架来实现图表的方式。这类框架以 D3.js 为代表,提供了数据处理能力,以及从数据转换成视图结构的通用 API,并且不限制用户处理视图的最终呈现。所以它的特点是更加灵活,不受图表类型对应 API 的制约。不过,因为图表库只要调用 API 就能展现内容,而数据驱动框架需要我们自己去完成内容的呈现,所以,它在使用上就没有图表库那么方便了。
使用图表库和使用数据驱动框架的具体过程和差别,我这里准备了一个对比图,你可以看一下。

使用图表库(左)和使用数据驱动框架(右)渲染图表的流程对比
不过这么讲还是比较抽象,接下来,我们还是通过绘制条形图和力导向图,来体会用数据驱动框架和用图表库构建可视化图表究竟有什么区别。
课前准备
与上一节课差不多,我们还是需要使用 SpriteJS,只不过今天我们将 QCharts 换成 D3.js。