D3 (Data-Driven Documents)或者叫 D3.js 是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术结合起来, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化.
D3支持 SVG 以及 Canvas 进行作画,在这里首先使用 SVG 来画一个简单的柱状图。
1. 选择器与数据绑定
首先我们先看看d3的选择器,D3用于选择的函数有两个:
- d3.select():用来选择所有指定元素中的第一个
- d3.selectAll():用来选择所有的指定元素
常用例子有
var body = d3.select("body"); //选择文档中的body元素
var p1 = body.select("p"); //选择body中的第一个p元素
var p