D3.js的v5版本入门教程（前篇）—— 关于

D3.js入门教程

    1、D3.js简介

        D3.js是一个强大的数据可视化js语言，可以利用svg在网页上展示各种精美的矢量图

    2、D3.js的官方

        官网：https://d3js.org/

        官方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的v5版本入门教程（第七章）—— 比例尺的使用

        D3.js的v5版本入门教程（第八章）—— 坐标轴

        D3.js的v5版本入门教程（第九章）——完整的柱状图

        D3.js的v5版本入门教程（第十章）——让图表动起来

        D3.js的v5版本入门教程（第十一章）——交互式操作

        D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形

        D3.js的v5版本入门教程（第十三章）—— 饼状图

        D3.js的v5版本入门教程（第十四章）—— 力导向图

        D3.js的v5版本入门教程（第十五章）—— 树状图

        D3.js的v5版本入门教程（第十六章）—— 中国地图

    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图数据库项目专栏