Getting Started on D3.js

D3(Data-Driven Documents) 是一款基于SVG的非常基础、强大和应用广泛的库,提供了对于DOM结点操作的高效封装,适用于数据可视化的实现。

D3的核心库主要做了以下封装:


  1. DOM选择器

  2. DOM操作函数

  3. 动画变换


其实很像是jQuery,但与jQuery又有些根本的不同:


  • D3 是数据驱动的,在D3中是通过操作改变数据从而改变DOM

  • D3 通常用于做数据可视化,并且有很多相关的可视化插件


由于都包含DOM操作库,所以一些API很像也不奇怪。
http://stackoverflow.com/questions/13187112/what-is-the-difference-between-d3-and-jquery

截止目前,最新版本是 D3 v4.8

D3优点



  • BSD开源,有庞大的社区支持和维护

  • 数据驱动,以数据为核心,方便做数据到表现的映射

  • 后缀语法、选择器、动态属性、数据绑定、动画;

  • 大量示例,还有各种开源封装;

  • 相对底层,可以方便实现各种定制需求

  • 交互性实现相对于Canvas等简单;


D3缺点



  • 由于主要基于SVG, 设计使用不当可能会造成DOM节点过多,产生性能问题

  • 学习曲线较陡峭

  • 相对于echarts, highcharts,实现图表较麻烦,工作量较大


所以,如果需求变化不大,echarts等demo图表就能够满足需求的话,建议直接echarts等这种现成图表库;如果需要定制化,则D3非常适合。

预备知识



  • HTML, CSS, JavaScript

  • DOM 概念和一般操作

  • SVG 标签及一些常用属性


作为前端开发者来说,D3只是又一个库而已。

但如果要做出优秀的数据可视化图表,还需要对各种图表特点和适用性,动画美学,源数据特点,以及物理公式等有一些了解。

学习工具


推荐用jsbin,jsfiddler等在线编辑器,可以方便预览。

 

小试身手


[codepen_embed height=”265” theme_id=”0” slug_hash=”ZKReQP” default_tab=”js,result” user=”ijse”]See the Pen <a href=’https://codepen.io/ijse/pen/ZKReQP/'>D3</a&gt; by Li Yi (<a href=’http://codepen.io/ijse'>@ijse</a&gt;) on <a href=’http://codepen.io'>CodePen</a>.[/codepen_embed]

参考: