D3.js入门

D3.js入门

1.什么是D3.js？

• Data-Driver-Document（数据驱动文档）：是一个用来使用Web标准做数据可视化的js库；

• 数据可视化：用交互的/可视化的方式对抽象数据进行展示，已达到数据认知的目的，数据是纯粹的的事实，纯粹意味着这种事实没有经过任何处理，而信息是数据处理后的结果，他揭示了数据的意义；

• 优势：比Processing这样的底层绘图简单，比Echarts这样的高度封装的图表更自由，也就是说d3.js为我们提供了一个不是特别底层，也不是高度封装的库，能够给使用者很好地发挥空间，同时学习成本也没有那么大。

2.D3的数据与图形

• 理解enter-updte-exit（进入-更新-退出）模式

• enter(进入)

  

  A:代表数据集合，就是需要可视化的数据；
  B:代表图形元素的集合，就是展示出的图形；

  如上图所示，集合A中的阴影区部分表示了未被可视化的数据，enter操作的意义在于通过enter()函数返回一个集合，
  这个集合里面包含的就是没有被可是可视化的数据；这也就是我们数据化的第一部分
  操作，找到那些没有被可视化的数据；

• update（更新）
  

  如上图所示，阴影区域表示图像和数据集合的交集，也就是当前数据所对应的图形，通过data函数，可以选择出交集集合，然后对选择出的集合进行操作，对元素进行更新；

• exit(退出)
  
  图中的阴影表示没有关联任何数据的图形，为什么会有没有数据的图形，一般而言是从
  数据中删除了数据产生的。通过exit函数可以选择出没有关联任何数据的图形，可以调
  用相关函数更新或是删除。

3.实例

• 柱状图

  var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8]; 
      //定义数据，定义集合A
  
    function render(data) { //render函数来更新图表
        // Enter
        d3.select("body").selectAll("div.h-bar") 
             //选中body,选中类名为h-bar的div，其实此时页面上没有这些元素，选择出图形元素的集合
            .data(data) // data函数将数组绑定到将要创建的图形元素上
            .enter() // enter函数选择没有被可视化的数据元素，render第一次调用的时候，没有数据被可视化，所以选中的是所有的数据
                .append("div") // 为每一个数据创建一个div，这里d3为响应的div添加了__data__属性，这个属性的值为绑定的数据值；
                    .attr("class", "h-bar")//类名设置为h-bar
                .append("span"); //每个div中添加一个span
  
        // Update
        d3.select("body").selectAll("div.h-bar")
            .data(data)  //定义图形集合和数据集合,更新模式下，data()函数返回数据集合和图形集合的交集
                .style("width", function (d) { // 在和数据关联的图形更改属性，所有的d3修饰函数都可以使用这样的函数来修改图形元素的属性，这个函数有一个形参，d代表与对应图形元素关联的数据值
                    return (d * 3) + "px";
                })
                .select("span") // 子元素能拿到父级元素的值
                    .text(function (d) {
                        return d;
                    });
                
        // Exit
        d3.select("body").selectAll("div.h-bar")
            .data(data)
            .exit() //得到没有任何数据关联的图形元素
                .remove();//移除这些元素        
    }
  
    setInterval(function () { 
        data.shift();
        data.push(Math.round(Math.random() * 100));
        render(data);
    }, 1500);
  
    render(data);

  

  参考文献：《D3.js数据可视化实战手册》