w1100n
This site is best viewed in Google Chrome
6/12/2013 21:20

先什么都不说。一起来看看d3.js神奇效果。

打开https://github.com/mbostock/d3/wiki/Gallery 这里有很多d3.js的Demo。

这个东西图表确实很不错吧?

简单介绍之前 先说明一点东西。

1.   d3.js 只适合现代浏览器,(意思是说它对IE8已经IE8以下版本支持不好)。但对IE9,chrome,FireFox,Opera 和基于webkit的苹果浏览器Safari都能支持。

2.  图标是基于矢量图形的,采用svg进行画图。所以在了解d3.js之前你需要知道svg有关知识。看看这个就够了http://www.w3school.com.cn/svg/index.asp

3.  如果你用d3.js,我就当你是一个有点点经验的程序猿了,不是菜鸟,所以。。。。懂一点Jquery那是必须的。。。

4.  本系列博客将根据官方文档的介绍顺序来写。

5. 重要的一点,本人也是一边学一边写,出现点错误是不可避免。若有发现,请指出。在博客后面留言就可以了。谢谢!

6. 争取每周末更新两篇。(希望了解更多可点击此处)

好吧。有了以上说明,先下载一个d3.js (连js库都没有能说个j8)

下载地址http://d3js.org/d3.v3.zip

下载好了??

国际惯例 Hello World

[html]

<!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>
<h1></h1>
</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>

[/html]

<< Previous Posts Newer Posts >>
辽ICP备14012896