d3.js

2016-10-17 本文已影响0人 xiumeiii

D3: 是Data-Driven Documents（数据驱动文档）的简称。

D3(或D3.js) 是一个用来使用Web标准做数据可视化的JavaScript库。 D3帮助我们使用SVG, Canvas 和 HTML技术让数据生动有趣。 D3将强大的可视化，动态交互和数据驱动的DOM操作方法完美结合，让我们可以充分发挥现代浏览器的功能，自由的设计正确的可视化界面。

结合HTML，SVG，CSS，D3可以图形化的，生动的展现数据。是目前最流行的数据可视化库，同时是Github上前端库排行第二（仅次于bootstrap）。比Processing这样的底层绘图库更简单，比Echarts这样高度封装的图表库更自由。

D3基于开源协议BSD-3-Clause3，可以免费用于商业项目。源码托管在GitHub 上star数已达50000多次，有大量用户和丰富友好的案例。

(1) JS的数据类型。如数字，时间，字符串，布尔值，数组，对象等都可以。

(2)D3自定义的数据类型。

如集合（Set）,映射（Map）,嵌套（Nest）,及各种颜色空间（RGB，HSL，L*a*b，HSV）对象等

最常用的是数组，JSON。特殊的有CSV，GeoJSON数据等。

dataset = [ 5, 10, 15, 20, 25 ];

d3.select("body").selectAll("p").data(dataset)//使用D3经典的E-N-E编程套路

.enter()//将数据传递到DOM中。如果数据值比相应的DOM元素多，就用enter()创建一个新元素的占位符。

.append("p")//enter()创建的占位符在DOM中插入一个p元素。

.text("New paragraph!");//为新创建的p标签插入一个文本值。

(1) 使用随机数值

(a)原生JS方式：

dataset = [];

for (var i = 0; i < 25; i++) {var newNumber = Math.round(Math.random() * 30); //随机生成0-30的整数

dataset.push(newNumber);}

(b)D3 方式：

dataset = [];

for (var i = 0; i < 25; i++) {var newNumber = Math.round(Math.random() * 30); //随机生成0-30的整数

dataset.push(newNumber);}

d3.range(25): 生成25个数字,真正生成数字的地方在map函数里

d3.round: 函数对随机数保留一位小数四舍五入。

d3.random.normal(15,8)(): 生成一个满足期望是15，方差是8的正态分布的随机数。

// SVG尺寸varw =500;varh =50;varsvg = d3.select("body") .append("svg")

也就是选择元素-绑定数据-添加新元素的占位符-添加元素-设置属性或样式。