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.还可以直接包含网络的链接,这种方法较简单

  1. <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 】 简介和安装的更多相关文章

  1. 【 D3.js 入门系列 --- 0 】 简介及安装

    家是我的个人博客: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...

  2. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  3. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  4. 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表

    前面几节讲解了图标.坐标轴.比例等等,这一节整合这些内容做一个实用的图表.结果图如下: 代码如下所示: <html> <head> <meta charset=" ...

  5. 【 D3.js 入门系列 --- 5 】 如何添加坐标轴

    第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做 ...

  6. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  7. 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld

    下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...

  8. 【 D3.js 入门系列 — 3 】 做一个简单的图表!

    图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...

  9. 【 D3.js 入门系列 --- 5 】 怎样加入坐标轴

    本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处.谢谢.      第3节中做了一个图标.但没有为它加入一个对应的坐标轴. ...

随机推荐

  1. DataGridView复选框实现全选功能,并取被选中的某行某列的值(三)

    目标: 一.选中全选这个复选框,会选中第一列所有的复选框 拉过来一个CheckBox控件(CheckBox1)覆盖在第一列的标题上,文本值:全选 方法:双击上面拉的CheckBox控件,进入其事件 p ...

  2. Javascript 的类型转换之减号

    专职写JS已经有一个月了(对,没错就是一个月),从2014年11月24实习开始到今的2月份,我做的工作一直都是切图,另外跟着老板学产品,现在我一听到切图两字,我就想吐...所以我找了一份专职写JS的工 ...

  3. 虚拟机安装Linux系统图文教程

    虚拟机安装Linux系统图文教程 | 浏览:523 | 更新:2014-09-16 15:31 1 2 3 4 5 6 7 分步阅读 Linux系统的安装 工具/原料 VMware 9.0 虚拟机 L ...

  4. [转]dev C++编写windows程序遇到问题

    1.工具-编译选项-编译器-在连接器命令行加入以下命令: -mwindows 2.出现错误:undefined reference to `PlaySoundA@12' 解决办法:工具-编译选项-编译 ...

  5. 2016/7/30 div位置设置,表格大小统一

    在做作业过程中遇到的一些问题和我的总结 1.作业中给出了一张背景图,并让我在背景图中一片区域写内容 我的思路是将一个div放在这片区域,那么问题就是如何定义div的位置和大小 查阅资料后发现并不复杂, ...

  6. 2016 - 1- 19 GCD单例模式

    一:单例模式的作用: 1.可以保证在程序运行过程中,一个类只有一个实例,而且易于外界访问.2 2.从而方便的控制了实例的个数,节约系统资源. 二:单例模式的应用场景: 代码: 1.在一个需要实现单例模 ...

  7. SQL2008:在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误。未找到或无法访问服务器。请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接。

    错误: 解决方案: 1.查看服务是否开启,如果没有开启,请开启服务. 2.服务器名称栏:格式:主机名\实例名或者ip\实例名 如:10.10.4.81\SQLSERVER

  8. What is hmux in resin?

    When I start the Resin server it says hmux listening to localhost:6802 What is this hmux? Is this a ...

  9. gen already exists but is not a source folder ZT

    解决方法:1. 右键点击工程,选择 "Properties"2. 选择左边的 "Java Build Path" 3. 打开 "Source" ...

  10. Ubuntu系统启用Apache Mod_rewrite模块

    在终端中执行 sudo a2enmod rewrite 指令后,即启用了 Mod_rewrite 模块. 另外,也可以通过将 /etc/apache2/mods-available/rewrite.l ...