D3
D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HMTL表格，或是利用它的流体过度和交互，用相似的数据创建惊人的SVG条形图。D3-js
D3.JS 基于javascript的图表展示库
先什么都不说。一起来看看d3.js神奇效果。
打开https://github.com/mbostock/d3/wiki/Gallery 这里有很多d3.js的Demo。
这个东西图表确实很不错吧？
简单介绍之前 先说明一点东西。
d3.js 只适合现代浏览器， (意思是说它对IE8已经IE8以下版本支持不好) 。但对IE9,chrome,FireFox,Opera 和基于webkit的苹果浏览器Safari都能支持。
图标是基于矢量图形的，采用svg进行画图。所以在了解d3.js之前你需要知道svg有关知识。看看这个就够了http://www.w3school.com.cn/svg/index.asp
如果你用d3.js，我就当你是一个有点点经验的程序猿了，不是菜鸟，所以。。。。懂一点Jquery那是必须的。。。
本系列博客将根据官方文档的介绍顺序来写。
重要的一点，本人也是一边学一边写，出现点错误是不可避免。若有发现，请指出。在博客后面留言就可以了。谢谢！
争取每周末更新两篇。(希望了解更多可点击此处)
好吧。有了以上说明，先下载一个d3.js (连js库都没有能说个j8)
下载地址http://d3js.org/d3.v3.zip
下载好了？？
国际惯例 Hello World
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello World</title>
<script type="text/javascript" src="d3.v3.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
function helloworld(){
d3.select("h1").html("Hello D3.js !");
/*
看到这个是不是觉得和Jquery很相似？
d3的选择器使用Jquery差不多，当然没有Jquery那么强大了，
这就是为什么我在开篇会提到jquery，如果对Jquery有一定的了解那么
关于d3的选择器你也就会用了。
*/
};
helloworld();
/*啰嗦一下，有点Jquery经验的请无视。
helloworld这个方法之所以在body标签后调用而不是在head标签中 是因为浏览器解析html文档
是按顺序解析，如果写在head标签中，那么当浏览器解析到d3.select("h1")时，
d3会发现在解析过的html中找不到h1 DOM节点 也就无法正确选择到了。
至于怎么写在head标签中又可以在整个Html都加载后再执行请自行Google.
*/
</script>
</html>
|