在去年的这个时候，d3.js在github上的star数目刚20多k，如今人数已经飙升至67k，其风靡程度可见一般，随着大数据的发展，数据可视化也被越来越被重视，前端工程师中又多出来一个发展方向—— 数据可视化工程师。
数据可视化的制作除了需要扎实的前端功底以外，还涉及了大量的数学计算，算法优化，这些无疑又提高了数据可视化的门槛。我曾经加过一个可视化的交流群，有人开出了 10k/day 的公司培训价格，然鲜有人回复，可见可视化人才之奇缺。
学好数据可视化，走遍天下都不怕。学习可视化的同时，你除了可以学习制作更加炫酷的样式，还可以锤炼自己js技能，提升自我的算法能力，前端编程，无外乎css和js吗？ js足够强大，就算以后有千千万万个框架，不都万变不离其宗， 底层还是js，到时势必左右逢源，如鱼得水！
回到这个系列的主题，幸运的是d3.js把许多f方法都替我们封装好了，涉及到的最底的物理数学计算已经很完备了，我们只需在此基础上进行开发就行了。我的学习方法是先学会基本的api，在此基础上，我们以做带学，通过学习制作可视化图表，理解其实现原理，查漏补缺，并逐步将其变成自己的东西。
今天开始第一节，d3初探--创建更新dom及其上面绑定的数据
顶部先引入d3.js
<script src="https://d3js.org/d3.v4.min.js"></script>
js绘制部分
创建比例尺
当我们拿到数据的时候，很多数据可能值过大或者过小，这时候我们就需要对数据进行预处理，将数据处理成合适的取值范围，便于我们进行生成图表
var data = [12, 25, 13, 23, 24, 55, 25, 30];
var dataRange = d3.scaleLinear() //创建一个值域的线性比例尺
.domain([0,100])
.range([0,300]);
var colorRange = d3.scaleLinear() //创建一个颜色的线性比例尺
.domain([0,100])
.range(["#29B6F6", "#01579B"]);
编写渲染函数
function render(data){
-------渲染函数内部如下------
}
// Enter 当前选择中存在但是当前DOM元素中还不存在的每个数据元素的占位符节点。
d3.select("body").selectAll("div.rect")
.data(data) //绑定数据与图形
.enter() //进入状态（增加图形匹配多余的数据）
.append("div") //生成dom节点，此时已有可显示dom
.attr("class","rect") //添加类名
.append("span"); //添加span
// Update
d3.select("body").selectAll("div.rect")
.data(data) //绑定数据到dom 节点
.style("width",function(d){
return dataRange(d) + "px" //通过数据生成相应样式
})
.style("background-color",function(d){
return colorRange(d);
})
.select("span") // 选取当前div下的span
.text(function(d){
return d; //调用函数，返回与该图形绑定的数据d
});
// Exit 找出在当前选择存在的DOM元素中没有新的数据元素
d3.select("body").selectAll("div.rect")
.data(data)
.exit()
.remove(); （删除没有数据的多余的图形）
渲染图形
render(data); //第一次执行
d3.interval(function(){
data.shift(); //删除数组的第一个数据,并添加一个数据
data.push(Math.round(Math.random() * 100));
render(data);
},1000); //1s执行一次
一些样式
body{
font-family: "helvetica";
}
.rect {
min-height: 30px;
min-width: 10px;
background-color: steelblue;
margin-bottom: 2px;
font-size: 11px;
color: #fff;
text-align: right;
padding-right: 2px;
}
好了，图形绘制完毕。效果如下
预览
不积跬步，无以至千里。 勿在浮沙筑高台。初学者还是应该最简单最基本的图表，如柱形图，折线图，散点图练习，通过对d3最基本最核心的功能学习，基础打捞，我们才能在制作复杂图表时更加得心应手。
