38 | 实战(二):如何使用数据驱动框架绘制常用数据图表?
胡光
该思维导图由 AI 生成,仅供参考
你好,我是月影。
上一节课,我们使用图表库实现了一些常用的可视化图表。使用图表库的好处是非常简单,基本上我们只需要准备好数据,然后根据图形需要的数据格式创建图形,再添加辅助插件,就可以将图表显示出来了。
图表库虽然使用上简单,但灵活性不高,对数据格式要求也很严格,我们必须按照各个图表的要求来准备数据。而且,图形和插件的可配置性,完全取决于图表库设计者开放的 API,给开发者的自由度很少。
今天,我们就来说说,使用数据驱动框架来实现图表的方式。这类框架以 D3.js 为代表,提供了数据处理能力,以及从数据转换成视图结构的通用 API,并且不限制用户处理视图的最终呈现。所以它的特点是更加灵活,不受图表类型对应 API 的制约。不过,因为图表库只要调用 API 就能展现内容,而数据驱动框架需要我们自己去完成内容的呈现,所以,它在使用上就没有图表库那么方便了。
使用图表库和使用数据驱动框架的具体过程和差别,我这里准备了一个对比图,你可以看一下。
使用图表库(左)和使用数据驱动框架(右)渲染图表的流程对比
不过这么讲还是比较抽象,接下来,我们还是通过绘制条形图和力导向图,来体会用数据驱动框架和用图表库构建可视化图表究竟有什么区别。
课前准备
与上一节课差不多,我们还是需要使用 SpriteJS,只不过今天我们将 QCharts 换成 D3.js。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文详细介绍了如何使用数据驱动框架绘制常用数据图表,以D3.js为例进行了详细讲解。作者首先对比了使用图表库和使用数据驱动框架的差异,指出数据驱动框架更加灵活,不受图表类型对应API的制约。然后,通过具体的代码示例和详细的讲解,帮助读者了解了使用数据驱动框架绘制常用数据图表的方法和特点。文章还介绍了使用D3.js绘制力导向图的方法,通过模拟节点之间的斥力来保证节点不会相互重叠,并实现了拖拽节点的交互。最后,总结了使用数据驱动框架绘制图表的优缺点,并指出D3.js并没有强制限定图形库,可以适用于不同的渲染方式。整体来看,本文内容丰富,通过具体的代码示例和详细的讲解,为读者提供了深入了解数据驱动框架绘制图表的方法和技术特点的学习资源。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》,新⼈⾸单¥68
《跟月影学可视化》,新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(2)
- 最新
- 精选
- 平和https://s0.ssl.qhres.com/static/f74a79ccf53d8147.json 数据获取不到了,能提供一下吗
作者回复: 把qhres改成qhres2,因为那个CDN域名被封了。
2021-09-16 - 谢小路看后续工具库确实存在很多选择,先学好一个,场景不适合再选择其他的。2021-02-08
收起评论