D3.js初体验

在之前的项目里面我们已经玩过echarts了,但它的封装程度太高了,容我们发挥的空间不大(但是在做基础的交互图表时十分方便)。所以,今次我们来玩玩强大的D3.js,这可谓是近年来最受欢迎的可视化组件了。

D3的自由度非常高,可以提供给玩家们很多想象与发挥空间,支持创作多种自定义的图形。一般玩家在创作复杂的可视化图形时更加倾向使用D3。但是其优点同时也是其缺点:创作一个简单的条形图也要耗费比较多时间!

D3 = Data-Driven Documents,数据驱动的文件。也就是文档内容的生成以及更新等一系列过程是基于数据的改变来驱动的。
其中有三个状态:ENTER-UPDATE-EXIT。简单解释一下:ENTER状态就是为已有的数据添加图形;UPDATE就是更新数据与图形;EXIT就是为根据数据删去多余的图形。以下就是根据D3这个基本的运行模式来实现的动态数据更新的例子:(注意D3.js的“函数即对象”的链式写法,与jQuery类似)

运行效果:(每1.5s会更新一次数据)。可见,就话这几个条条也需要几十行的代码。

D3.js初体验_第1张图片

D3.js初体验_第2张图片


    
    
        Array as Data
        
        
    
    
    
        
    

你可能感兴趣的:(D3.js初体验)