深入浅出d3.js数据可视化之道（1）

在去年的这个时候，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最基本最核心的功能学习，基础打捞，我们才能在制作复杂图表时更加得心应手。

源代码地址