D3js入门 --- 柱状图的制作

D3js官网：https://d3js.org/
最近在研究D3js，索性总结一些文档出来，来总结一周以来的学习心得。
D3js官网全英文，相对于Echarts官网详细的文档，英文不好的同学，学起来可能要费劲些，不过有伙伴有中文翻译版的，附上链接：https://github.com/d3/d3/wiki/CN-Home

D3Js是什么

D3.js 是基于数据驱动文档工作方式的一款JavaScript函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一，它被很多其他的表格插件所使用。D3使你有能力借助HTML，SVG和CSS来生动地可视化各种数据。D3不需要你使用某个特定的框架，它的重点在于对现代主流浏览器的兼容，同时结合了强大的可视化组件，以数据驱动的方式去操作DOM。

浏览器支持

D3js和ECharts一样都是实现数据可视化的JS库，比较D3js和ECharts

• D3支持的主流浏览器不包括IE8及以前的版本。D3测试了Firefox、Chrome、Safari、Opera和IE9。D3的大部分组件可以在旧的浏览器运行。
• ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

安装

常用的引入方式：

• script标签引入

• npm命令安装

npm install d3

由于D3版本v5和v4/v3存在较大的变动，本篇文章主要以v3为主，依次由浅入深的聊一聊d3js的具体使用。

D3如何用

api官网 https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C
简单了解下，以下的demo要用到：

选择器

    
Hello World!
    
Hello World!
    
    

d3提供了丰富的dom操作，有点类似于jQuery的用法。
d3.select() 选择的是符合条件的第一个元素，它指定的为一个元素；
括号里面可以写标签、也可以写class名，id名，这点与jQuery神似

d3.select('body') //指定body标签内
或
d3.select('.red') //指定标签class名为red的第一个标签
或
d3.select('#blue') //指定标签ID名为blue的第一个标签

d3.selectAll('p') 选择的是所有p标签的元素，它指定的为一个集合；
.text('你好') 指定文档内容 content

p.style() 就是对p元素定义css样式
整个代码执行下来 结果就是两行红色字体的 你好！

d3的很多写法都类似于jQuery，并不那么陌生。

datum

    
Hello World!
    
Hello World!

    
    

数据可视化的源泉在哪？dataset是数据源；

• selection.datum - 取得或设置单个元素的数据，不必计算连接。

p.datum() //p标签的元素设置为str这个外部源

p.text() // 括号里接收一个函数回调，d就是str的值， i是索引
最后输出的结果：

第0个元素绑定的数据是china

第1个元素绑定的数据是china

data

    
Hello World!
    
Hello World!

    
    

• selection.data - 在计算相关的连接时，取得或设置一组元素的数据。
  数据源有3个，而p标签仅有两个元素，所以输出到页面的结果为：

I like dogs

I like cats

svg

append 添加svg标签
attr svg设定宽高

柱状图

运行结果：

image.png

这里面注意到
.enter() 作用是在为缺失的元素返回占位符

线性比例尺

d3.min() 返回最小值
d3.max() 返回最大值

d3.scale.linear() 构建一个线性比例尺
.domain() 取得或设置比例尺的定义域
.range() 取得或设置比例尺的输出范围

序数比例尺

线性比例尺的柱状图

带x轴的柱状图

输出结果为：

image.png

带xy轴的柱状图

image.png

带动画效果的柱状图