Data Visualization Using D3.js Linsong Cheng
目录 什么是D3.js 为什么进行数据可视化 基本函数介绍 常见可视化图形 实例程序
什么是D3.js D3.js的全称是（Data-Driven Documents） ,是一个基于数据操作文档的JavaScript函 数库，使用它主要是用来做数据可视化的。 D3提供了各种简单易用的函数，大大简化 了 JavaScript操作数据的难度。D3已经将 生成可视化的复杂步骤精简到了几个简单 的函数，只需要输入几个简单的数据，就 能够转换为各种绚丽的图形。 由于它本质上是 JavaScript ，所以用 JavaScript 也是可以实现所有功能的，但它能大大减小你的工作量，尤其是在数据可视化方面，
D3.js的安装和学习 1. 下载 D3.js 的文件： 解压后，在 HTML 文件中包含相关的 js 文件即可。 2. 直接包含网络的链接： <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 学习网站： http://d3js.org/ http://www.ourd3js.com/wordpress/
为什么进行数据可视化
基本函数介绍 1. 绑定数据 var set = ["I like dog","I like cat","I like snake"]; var sp = d3.select("body").selectAll("p"); //选择元素 sp.data(set) //绑定数据 .text(function(d,i){ return d; }); 2. 选择元素 d3.select(“p”) 和 d3.selectAll(“p”)
基本函数介绍 3. 插入、删除数据 4. 比例尺 var new_h1 = body.append("h1"); new_h1.text("Append new h1"); new_h1.remove(); 4. 比例尺 var wx = d3.scale.linear() .domain([0,d3.max(dataset)]) .range([0,500]);
基本函数介绍 5. 坐标轴 var axis = d3.svg.axis() .scale(xScale) .orient("bottom");
基本函数介绍 动态效果函数 一个动态柱状图实例： http://www.ourd3js.com/demo/transition.html transition() 启动转变效果 duration() 指定转变持续多少时间 ease() 指定转变的方式 delay() 指定转变延迟 一个动态柱状图实例： http://www.ourd3js.com/demo/transition.html
基本函数介绍 交互式操作 交互式操作实例： http://www.ourd3js.com/demo/event.html click ： 鼠标单击某元素时， mouseover ： 鼠标移到某元素上 mouseout ： 鼠标从某元素移开 mousemove ： 鼠标被移动 mousedown : 鼠标按钮被按下 mouseup : 鼠标按钮被松开 dblclick ： 鼠标双击 交互式操作实例： http://www.ourd3js.com/demo/event.html .on("click", function(){ } )
常见可视化图形 Layout 是 D3 中 “制作常见图形的函数”，D3 中共有12组 Layout 函数，这些 函数不是为了在绘制中布局什么，而是对输入的数据进行转换，转换成容易 进行可视化的数据。 Layout的API： https://github.com/mbostock/d3/wiki/Layouts
常见可视化图形 Pie： var dataset = [ 30 , 10 , 43 , 55 , 13 ]; var pie = d3.layout.pie();
常见可视化图形 var force = d3.layout.force() .nodes(nodes) .links(edges) .size([width,height]) .linkDistance(200) .charge([-100]) .start(); Force:
常见可视化图形 结合地图和力学图，制作可拖动的地图： http://www.ourd3js.com/demo/mapforce.html
实例程序 https://github.com/mbostock/d3/wiki/Gallery 提供了各种简单易用的函数，大大简化了数据可视化的难度 数据和可视化分离开来，提高开发效率
Thanks！