D3.js入门教程
1、D3.js简介
D3.js是一个强大的数据可视化js语言,可以利用svg在网页上展示各种精美的矢量图
2、D3.js的官方
官方API:https://github.com/d3/d3/blob/master/API.md
3、适合人群
本教程适合需要在网页前端做数据可视化图表开发、对数据可视化感兴趣、为图形痴狂,以及想了解并学习D3.js的读者
4、编写原因
D3.js相对较新,目前版本也多样,版本之间变化也比较大,目前最新版本是v5,但是目前网上面的好的入门教程大多是v3版本,v5版本的教程少得可怜,而且很分散,(我在学习的过程中没有找到v5版本比较好的教程,使自己看官方API,然后百度关键字,花漫长时间才找到正确编写方法),v5和v3版本差别还是很大的,而且最近因为参加学校的一个创新实训,需要做数据可视化,就学了这个
5、参考文献
我写这篇教程的灵感来自于这片教程,大家可以发现:章节标题差不多是一样的。但是别人的是v3版本的 教程,写的很好,我写的是v5版本的教程,因为版本之间的差别比较大,虽然有那么好的v3版本教程,但是我在学习的过程中还是遇到很多阻碍!所以想将经验分享出来
参考资料链接:http://wiki.jikexueyuan.com/project/d3wiki/
6、教程章节
D3.js的v5版本入门教程(第一章)—— 如何在项目中使用D3.js
D3.js的v5版本入门教程(第二章)—— 第一个程序 Hello World
D3.js的v5版本入门教程(第三章)—— 选择元素和绑定数据
D3.js的v5版本入门教程(第四章)—— 理解Update、Enter、Exit
D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素
D3.js的v5版本入门教程(第十二章)—— D3.js中各种精美的图形
7、精美的SVG图(预览需要用电脑才能打开链接)
在学习之前,先来放一波“毒”,看看从本教程你能学到什么——SVG图,太美了!!!
1、简单图表1
链接:点击预览
2、简单图表2
链接:点击预览
3、简单图表3
链接:点击预览
4、完整的柱状图
链接:点击预览
5、动态柱状图
链接:点击预览
6、会变色的柱状图
链接:点击预览
7、饼状图
链接:点击预览
8、力导向图
链接:点击预览
9、树状图
链接:点击预览
8、关于调试
本教程中出现的控制台指的都是chrome浏览器中的调试窗口的控制台
9、给我打赏
(如果你喜欢这篇教程的话!如果这篇教程对你有帮助的话!可以支持我)
(翻外篇)d3.js在网页端可视化neo4j图数据库
为了让大家更好的学习d3.js,“d3.js在网页端可视化neo4j图数据库”这是一个比较综合的项目——利用neo4j的java驱动API从neo4j中取数据,并利用d3.js在网页端进行可视化。大家在学完基础课程后可以做一下这个项目,进行巩固。点击下面链接进行查看:d3.js可视化neo4j图数据库项目专栏
转载自原文链接, 如需删除请联系管理员。
原文链接:D3.js的v5版本入门教程(前篇)—— 关于,转载请注明来源!