[d3.js] D3.JS 基于javascript的图表展示库<一>----简单介绍

来源：互联网发布：excel中怎么筛选数据编辑：程序博客网时间：2024/05/20 06:09

先什么都不说。一起来看看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

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

好吧，我承认没有半点技术含量。。。。请看下一篇。