公司内部分享——D3.js的简单使用

本篇是入门中的入门，甚至不会涉及svg，因为d3并不会帮我们去屏蔽svg和canvas的相关知识，只是让你更好的控制它们，所以为了快速了解d3的使用，这里用dom做渲染。

一、概述

官方定义:

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。

个人初显理解：

1. d3数据可视化 工具 库，使用很像jQuery
2. d3在v4.0后api变化很大 v3.0 vs v4.0 ，市面上的资料大多以3.0为主，给初学者系统学习d3造成不小的障碍。
3. 相比通过配置完成工作的可视化库使用会复杂很多，需要具备svg，canvas和图形相关的知识；相对的优点是实现图表会更多样。

资料

github api文档 内容结构参照

二、hello d3

<p></p
<p></p
复制代码

let p = d3.select("body")
	.selectAll("p")
	
p.text("Hello World")
复制代码

在线演示 demo1_p2_hello_d3.html

三、选择元素与绑定数据

1.其实d3选中元素和jQuery很相似。

d3主要通过 select , selectAll 实现选择元素，参照原生js的 querySelector querySelectorAll 和上面的"hello d3"的案例就可以知道它们的用法和区别。

d3是支持连缀操作的，当你选中元素后可以直接去更改它们

d3.select('p').style('background', 'yellow')
d3.selectAll('p').style('background', 'yellow') //不需要遍历，直接对整体进行操作
复制代码

2.当我们需要在当前dom中append一个子元素时，append返回的不是当前dom，而是子元素

d3.select('p').append('span').text('I am in span') //文本添加在span
复制代码

3.insert(newElement, targetElement) 返回插入的元素

<p>p1</p>
<p id="target">target</p>
<p>p2</p>
复制代码

d3.select('body').insert('p', '#target').text('I am new here').style('color', 'pink')
复制代码

新的p会被插到target前面

4.remove删除元素

d3.select('body').select('#target').remove() //先选中然后直接remove
复制代码

5.一些常用的修改dom样式，属性和内容的api

attr,style,text 看名字其实就知道，attr常用来修改svg节点的属性, 这用attr做个案例

d3.selectAll('p').text((d, i) => {
    if (i===2){
        d3.select(this).attr('class', 'new') //this为html
    }
    return d
})
复制代码

demo1_p2_hello_d3.html

3.选中的dom和数据一一绑定

<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>
复制代码

let dataset = ['javascript', 'css', 'html']
d3.select('#list').selectAll('li').data(dataset).text((d, i) => i+ ' : ' + d)
复制代码

但是，我们这里li和数据的数量是相同，当不同的时候怎么办，这就需要理解d3的数据驱动思想

在线demo: demo2_p3_selectDom.html

四、update,enter与exit

例子一：update和enter：update和enter：数组[3,6,9,12,15]绑定到三个<p>上。可以想象到，数组的最后两个元素没有可以绑定的元素，这时d3会建立两个空的元素与数组最后的两个数据相对于，那么这部分就称为Enter。而有元素与数据对应的部分就称为Update

例子二：exit：如果数组[3]绑定到三个<p>上，可以想象，最后两个<p>没有可绑定的数据，那么没有数据绑定的部分就称为Exit

在线demo: demo3_p4_data_state.html

(这节部分非原创，网上看到，讲的比官网还清楚，不过它也不是原创的，就不发地址了)

五、做一个简单的柱状图

用dom渲染一个横板柱状图，非常简单

div, p {margin: 0;}
#bar-wrapper{
    width: 500px;
    height: 500px;
    background: rgba(0,0,0,0.2);
    position: relative;
}
p {
    position: absolute;
    line-height: 50px;
    text-align: right;
    color: #fff;
}
复制代码

<div id="bar-wrapper"></div>
复制代码

const dataset = [300, 280, 450, 90, 150]
const padding = 30
const height = 50

d3.select('#bar-wrapper').selectAll('p').data(dataset).enter().append('p')
.style('left', 0) //这步其实可以放在css中，但是为了体验画柱状图的思想就放在这边，类比用rect中的x属性
.style('top', (d, i) => {
	return (i+1)* (padding + height) + 'px'
}) //类比y
.style('width', (d, i) => {
	return d+ 'px'
}).style('height', height+ 'px')
.style('background', 'red')
.text(d => d)
复制代码

本人在日常开发时用svg渲染图表比较多。在线demo: demo4_p5_draw_bar_by_dom.html

六、未完待续

其实学完这些还不算把d3的常用的基础概念学完，还有比例尺，坐标轴，svg的使用，常用图形的画法，才算是真正入门，本人自己也刚学d3，随着知识丰富会不断更新，如有错误欢迎评论指出。

附上结合上述知识的一个demo：demo5_p6_drawRectAndAxis.html