目标

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

一、概述

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

个人初显理解：

d3数据可视化工具库，使用很像jQuery
d3在v4.0后api变化很大v3.0 vs v4.0，市面上的资料大多以3.0为主，给初学者系统学习d3造成不小的障碍。
相比通过配置完成工作的可视化库使用会复杂很多，需要具备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
})

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