【 D3.js 入门系列 --- 0 】 简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库。如果你不知道什么是javascript,请先学习javascript的相关知识。
说得简单一点,D3.js主要是用于操作数据的,它通过使用HTML、SVG、CSS来给你的数据注入生命,即转换为各种简单易懂的绚丽的图形。
先看一个简单的例子。
现在有一组数据, 【 4 , 32 , 15 , 16 , 42 , 25 】 ,现在我希望让人一眼就看出他们的大小关系,怎么办?当然这里的数据不算多,有那眼疾手快的家伙站出来说我能一眼看出来!但更直观的是用图形显示,如下图:
通过图形的显示,能很清楚地知道他们的大小关系。当然,D3能力远不止如此,这只是一个很小的应用。通过D3的使用,你能把枯燥乏味复杂的数据,用很简单明了的形式显示出来,这也叫数据可视化。
学习D3.js最好的地方是: http://d3js.org/ ,当然里面都是英文的。
下面说一下怎么使用安装使用D3.js,方法有两种:
1.下载D3.js的文件
解压后,在html,jsp之类的文件中包含相关的js文件即可
2.还可以直接包含网络的链接,这种方法较简单
- <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
但使用的时候要保持网络连接有效,不能再断网的情况下使用。
好了,可以开始你的D3之旅了。
本文来自:博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/。转载请注明出处,谢谢。
【 D3.js 入门系列 --- 0 】 简介和安装的更多相关文章
- 【 D3.js 入门系列 --- 0 】 简介及安装
家是我的个人博客: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...
- 【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
- 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...
- 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: <html> <head> <meta charset=" ...
- 【 D3.js 入门系列 --- 5 】 如何添加坐标轴
第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做 ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...
- 【 D3.js 入门系列 — 3 】 做一个简单的图表!
图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...
- 【 D3.js 入门系列 --- 5 】 怎样加入坐标轴
本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处.谢谢. 第3节中做了一个图标.但没有为它加入一个对应的坐标轴. ...
随机推荐
- MyEclipse 修改代码不生效
最近得了一个项目,java开发的web项目,修改代码时,无论怎么改,都不生效: 各种度娘,没用. 原因是没有建立发布设定 这个东西我开始不理解它的作用,现在知道了: mysqleclipse项目在一个 ...
- ubnutu安装sougou 输入法
先安百度经验安装fcitx 1.首先下载sogoupinyin_2.0.0.0068_amd64.deb,点击安装后,会通过ubuntu软件中心安装,安装玩成后,任然是无法使用.然后: 2.然后执行下 ...
- HTML5中canvas的save和restore方法
canvas的save和restore方法: save() 方法把当前绘画状态的一份拷贝压入到一个保存图像状态的栈中.这里的绘画状态指坐标原点.变形时的变化矩阵(该矩阵是调用 rotate().sca ...
- ubuntu安装vim
1.安装 sudo apt-get install vim-gtk 2.安装完成之后,在命令行敲入vi,按“tab”键,可以看到,已经有vim命令的存在,安装成功. 3.配置 sudo vim /et ...
- Highcharts导出gb2312乱码问题
Highcharts是utf-8编码的,其本地的.net导出环境也是utf-8格式的,导致网页如果采用gb2312编码,显示正常,导出就乱码了.这种现象也同样经常出现在ajax的使用过程中. ajax ...
- 在ubunut下使用pycharm和eclipse进行python远程调试
我比较喜欢Pycharm,因为这个是JetBrains公司出的python IDE工具,该公司下的java IDE工具--IDEA,无论从界面还是操作上都甩eclipse几条街,但项目组里有些人使用e ...
- Apache Jmeter(1)
Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试但后来扩展到其他测试领域. 它可以用于测试静态和动态资源例如静态文件. ...
- [microsoft]PE和COFF文件格式
前言 我们知道,vs的C/C++编译工具把每一个编译单元(一个.c或.cpp源文件)编译成一个对象文件(.obj文件):然后用链接器把这些对象文件组合一个单个文件(.exe文件),称为可移植的可执行文 ...
- iOS闪烁效果工具 GlitchLabel
GlitchLabel 用于给文字添加闪烁效果,效果图如下: 开发环境: iOS 7.0+ Swift 2.2 Xcode 7 示例代码:https://www.yuedecaifu.com 1 2 ...
- 《day06---面向对象入门》
/* java开发流程:思路. 案例:对数组操作.获取最大值. 思路: 1,一组数,要获取最大值,比较. 2,怎么比较?挨个比较,要获取数组中的每一个数据都要比较. 3,比较完,记录下来比较大的数据, ...