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 等在线编辑器,可以方便预览。

 

小试身手

See the Pen D3 by Li Yi (@ijse) on CodePen.0

参考:

  • https://github.com/d3/d3/wiki/Tutorials

发表评论