d3中文案例_D3js初探及数据可视化案例设计实战 -web开发

编辑推荐:

本文来自cnblogs，本文主要介绍了D3js一个可视化工具，并且以实际案例讲解了数据可视化的设计、方法、过程和结果等相关内容。

摘要：本文以本人目前所做项目为基础，从设计的角度探讨数据可视化的设计的方法、过程和结果，起抛砖引玉之效。在技术方案上，我们采用通用web架构和d3js作为主要技术手段；考虑到项目需求，这里所做的可视化案例都是数据演示工具，不是数据探索工具。其中所用截图，并非最终效果图。

一． 基础说明

1. 基础技术

使用D3js绘制图形

图1，五彩斑斓的d3js

D3js是应用在web开发上的开源JS组件库，是一个数据可视化工具。D3的全称是Data-Driven

Documents(数据驱动文档)，在github上关注数量超过了2万人，是非常受欢迎的开源工具。使用d3的有开发者，有设计师，有艺术家，资料非常丰富(虽然中文的很少)。D3其核心在于SVG可伸缩矢量图形。从数学上讲，如果说位图是用矩阵描述数据元，那么SVG等矢量图就是用方程式描述数据元。SVG有放大不失真的效果。关于SVG的更多介绍可以访问http://www.w3school.com.cn/svg/svg_intro.asp

注意：

a) SVG技术不能兼容IE8及更低版本的IE浏览器。如果想要IE8使用d3，请用r2d3.js(一个结合了

Raphael.js的扩展库)。但是考虑到即使如此，IE7依然无法兼容，不如放弃对二者的兼容性考虑。如果实在要兼容IE，要么用VML(微软出品的绘图工具，缺点是复杂)，要么预渲染成位图(需要放弃一些交互效果)。

b) SVG在浏览器端实现的方法是对每一个点和边新建一个对象，虽然这样做令我们操作它变得更容易(我们可以直接操作dom，代码像jquery一样简洁)，但是节点数量如果过多就会消耗太多的系统资源。例如论坛里一个朋友使用d3绘制超过12000个节点的图，直接导致每个试图打开它的浏览器都崩溃了。这个时候如果不愿意做简化那么应该试试canvas绘图。

2. 制作流程

D3js只是一个可视化工具。就像学会了photoshop工具不等于能画出好看的CG一样，光会用D3js的API，依然不能保证可以设计出优秀的可视化作品。好在d3js已经提供了很多经典案例以供学习。初学D3js的最好方法还是以案例为切入点，通过修改开源的案例来快速实现想要的效果。如此积累到一定程度便可主动设计新案例。可以说跟从临摹开始的美术学习完全一样，设计制作可视化案例的基本流程是：

1) 分析需求——确认重点表现对象

2) 分析数据来源——确认数据维度和特征

3) 寻找参考案例——依照需求和数据来源寻找类似案例

4) 设计图形——纯设计角度制作PSD效果图

5) 使用静态数据制作源程序——生成静态的网页代码

6) 数据预处理——对不同的数据格式和来源进行过滤

7) 使用动态数据测试和修改源程序——生成可用的程序

8) 迭代

http://sulab.org/2013/02/data-chart-plugin-beta/这篇来自SU

lab的文章，描述了“基因组导航系统”数据可视化案例的制作过程，很好的反映了以上制作流程。

当然