D3.js version4教程(1)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26025363/article/details/78697168

D3.js version4教程(1)-前言

为什么要数据可视化

有一句话说得好，一图胜千言万语，图表能让人更容易理解，更容易让人一眼看出要点，提升人的体验.一幅图可能比1000个数据还有效.况且,前端作为页面,很大程度上用得到数据的图表,容易更让人理解.

---

为什么要学习D3

很简单,因为项目中要用到D3.为什么不用其他的图表,比如echart等.这个暂时我没法回答.
d3的优势在于能够将数据与DOM绑定在一起,使得数据与图形形成一个整体.
数据转换和绘制是独立的.比如要画一个饼图,有些库直接提供一个函数,输入数据,饼图就出来了.D3是提供一个函数,将数据转换为饼图数据,然后自己在设定画图方式,这种情况就可以定制一些图表的细节,将数据绑定和绘图分离.
本次学习的版本是第四版,第三版跟第四版的api操作改动很大.

---

数据:现在和未来

未来是数据时代,数据的产生是指数爆炸级的.所以数据可视化很有必要.
国外的家伙说,数据就是新的石油.

---

数据可视化的要素

1. 坐标
2. 数值大小
3. 色彩
4. 标签

---

图表的种类

1. 柱形图
2. 散点图
3. 折线图
4. 饼状图
5. 弦图
6. 力导向图
7. 树状图
8. 打包图
9. 分区图

---

基础

• HTML和CSS基础
  知晓html5的元素标签和属性,熟悉CSS的渲染和模型,各种CSS选择器
• JavaScript基础
  熟悉JavaScript的语法和概念,会使用JavaScript操作DOM元素
• DOM基础
  使用JS操作DOM,了解DOM元素
• SVG基础
  SVG的概念,SVG下的元素标签,属性.

---

下一部分讲述选择器和数据,D3的选择器提供了操作DOM和数据进行绑定.