跟月影学可视化
月影
前奇虎 360 奇舞团团长,可视化 UI 框架 SpriteJS 核心开发者,《JavaScript 王者归来》作者
30206 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 54 讲
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

38 | 实战(二):如何使用数据驱动框架绘制常用数据图表?

实现拖动节点的功能
绘制连线
绘制节点
读取数据
创建力模型对象simulation
添加坐标轴
迭代操作设置属性
使用d3-selection创建并选择layer对象
使用D3.js方法对数据进行映射
准备数据
创建SpriteJS的容器
灵活性
通用API
数据处理能力
将QCharts图表库实现的图表改用D3.js实现
完善条形图
D3.js和SpriteJS的复杂性
选择数据驱动框架的情况
使用图表库 vs 使用数据驱动框架
使用D3.js绘制力导向图
使用D3.js绘制条形图
D3.js
推荐阅读
小试牛刀
要点总结
数据驱动框架
如何使用数据驱动框架绘制常用数据图表

该思维导图由 AI 生成,仅供参考

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

课前准备

与上一节课差不多,我们还是需要使用 SpriteJS,只不过今天我们将 QCharts 换成 D3.js。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文详细介绍了如何使用数据驱动框架绘制常用数据图表,以D3.js为例进行了详细讲解。作者首先对比了使用图表库和使用数据驱动框架的差异,指出数据驱动框架更加灵活,不受图表类型对应API的制约。然后,通过具体的代码示例和详细的讲解,帮助读者了解了使用数据驱动框架绘制常用数据图表的方法和特点。文章还介绍了使用D3.js绘制力导向图的方法,通过模拟节点之间的斥力来保证节点不会相互重叠,并实现了拖拽节点的交互。最后,总结了使用数据驱动框架绘制图表的优缺点,并指出D3.js并没有强制限定图形库,可以适用于不同的渲染方式。整体来看,本文内容丰富,通过具体的代码示例和详细的讲解,为读者提供了深入了解数据驱动框架绘制图表的方法和技术特点的学习资源。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(2)

  • 最新
  • 精选
  • 平和
    https://s0.ssl.qhres.com/static/f74a79ccf53d8147.json 数据获取不到了,能提供一下吗

    作者回复: 把qhres改成qhres2,因为那个CDN域名被封了。

    2021-09-16
  • 谢小路
    看后续工具库确实存在很多选择,先学好一个,场景不适合再选择其他的。
    2021-02-08
收起评论
显示
设置
留言
2
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部