可视化库D3.js(1)-入门篇

为什么要进行数据可视化

一图胜千言。从今天开始可视化库的第一章-入门篇咯

image

什么是D3.js

D3指的是Data-Driven Documents，js即Javascript，是后缀名。先看看官网上对D3.js库的定义：

D3.js is a JavaScript library for manipulating documents based on data.D3 helps you bring data to life using HTML, SVG, and CSS.

D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

翻译成中文大致意思为：

D3.js 是基于数据驱动文档工作方式的一款JavaScript函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一。D3使你有能力借助HTML，SVG和CSS来生动地可视化各种数据

D3不需要你使用某个特定的框架，它的重点在于对现代主流浏览器的兼容，同时结合了强大的可视化组件，以数据驱动的方式去操作DOM

通过上述的表达，总结D3.js库的几大特点：

1. 一款基于JavaScript的函数库

2. 借助HTML、SVG和CSS等实现可视化

3. 组件强大，通过数据驱动的方式来操作DOM

安装

1. 下载最新的版本V5.16.0。解压后，在HTML文件中包含相关的js文件即可

D3.zip

2. 通过采用

   注意：现在已经是V5版本。V5和V3的很多语法还是有区别的，后期所有的文档都是基于V5。

   预备知识

   如果想通过D3来实现数据的可视化，需要的预备知识：

   • HTML：超文本标记语言，用于设定网页的内容

   • CSS：层叠样式表，用于设定网页的样式

   • JavaScript：流行的前端语言，用于设定网页的行为

   • DOM：文档对象模型，用于修改文档的内容和结果

   • SVG：可缩放矢量图形，用于绘制可视化的图形

   以上知识点没有必要掌握的非常精通，建议到W3school快速入门，了解基本概念，再看几个案例demo，以后遇到不懂的地方可以进行查看。

   编程环境

   D3.js是在网页上的可视化制图，常用的网页制作工具：

   1. IDE的选择：VS code、Sublime Text、Notepad++等，推荐使用VS code

   2. 浏览器：D3支持的主流浏览器不包括IE8及以前的版本。D3测试了Firefox、Chrome、Safari、Opera和IE9。D3的大部分组件可以在旧的浏览器运行。

   Chrome是最好的选择。强大的调试功能会让你事半功倍！推荐浏览使用chrome的另一个好处是查找资料更多更全面

   3. 服务器软件：Apache、Tomcat等，这个是非必须的。但是有些函数需要放置于服务器目录下，才能正常运行，比如关于导入json文件的函数

   学习网站

   以下是几个学习网页制作和D3的网站：

   1. W3school

   W3school，非常全面的网站建设课程，从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 等

   2. HTML+CSS快速入门

   初识HTML(5)+CSS(3)-2020升级版：HTML+CSS快速入门-2020升级版

   3. SVG

   可缩放矢量图形，即SVG，是W3C XML的分支语言之一，用于标记可缩放的矢量图形

   SVG-菜鸟课程：SVG-菜鸟课程

   SVG|MDN：SVG|MDN

   SVG图像入门教程|阮一峰老师：SVG图像入门教程|阮一峰老师

   4. D3.js

   第一个推荐的网站肯定是官网，包含很多的示例和API文档，都是根据最新的版本发布的

   D3官网：https://d3js.org/

   D3.js的V5版本入门教程：D3.js的V5版本入门教程

   慕课网-使用D3制作图表：慕课网-使用D3制作图表

   数据可视化编程-使用D3.js：数据可视化编程-使用D3.js-清华大学

   Data Visualization with D3.js - Full Tutorial Course：Data Visualization with D3.js - Full Tutorial Course，油管上的一个实例演示课程，需要科学上网才能观看

   D3学习资料汇总

   第一个D3.js的程序

   image-20200504100247944

   代码解释：

   1. 在body标签中放入两个p标签，没有写入内容

   2. 定义变量p，通过链式调用获取到全部的p元素，即selectAll()方法

   3. 通过text()方法来写入内容，进行输出