家是我的个人博客: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/。转载请注明出处,谢谢。

D3的全称是(Data-Driven Documents),顾名思义能够知道是一个关于数据驱动的文档的javascript类库。假设你不知道什么是javascript。请先学习javascript的相关知识。

说得简单一点,D3.js主要是用于操作数据的,它通过使用HTML、SVG、CSS来给你的数据注入生命,即转换为各种简单易懂的绚丽的图形。

先看一个简单的样例。

如今有一组数据。 【  4 , 32 , 15 。 16 , 42 , 25   】 。如今我希望让人一眼就看出他们的大小关系,怎么办?当然这里的数据不算多。有那眼疾手快的家伙站出来说我能一眼看出来!

但更直观的是用图形显示。例如以下图:

通过图形的显示,能非常清楚地知道他们的大小关系。当然,D3能力远不止如此,这仅仅是一个非常小的应用。通过D3的使用,你能把枯燥乏味复杂的数据,用非常easy明了的形式显示出来,这也叫数据可视化。 



    学习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游。

版权声明:本文博主原创文章。博客,未经同意不得转载。

【 D3.js 入门系列 --- 0 】 简介及安装的更多相关文章

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

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  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. Ruby(面向对象程序设计的脚本语言)入门

    Ruby是一种为简单快捷的面向对象编程(面向对象程序设计)而创的脚本语言. 简单介绍 Ruby 是开源的,在Web上免费提供,但须要一个许可证. Ruby 是一种通用的.解释的编程语言. Ruby 是 ...

  2. 每天五个java相关面试题(3)

    1. Servlet的生命周期是什么? 答: 第一次请求: 构造方法->init() -> service() -> doGet()/doPost() 以后的请求:service() ...

  3. 【b091&&z11】潜伏者

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] R国和S国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动. 历尽艰险后,潜伏于S国的R国间谍小 ...

  4. android请求

    //请求 HttpURLConnection conn = (HttpURLConnection)new URL(path).openConnection(); conn.setConnecTimeo ...

  5. [Angular2 Form] Model Driven Form Custom Validator

    In this tutorial we are going to learn how simple it is to create custom form field driven validator ...

  6. php修改SESSION的有效生存时间

    如何修改SESSION的生存时间 我们来手动设置 Session 的生存期: <?phpsession_start(); // 保存一天 $lifeTime = 24 * 3600; setco ...

  7. Mysql错误: ERROR 1205: Lock wait timeout exceeded解决办法(MySQL锁表、事物锁表的处理方法)

    Java执行一个SQL查询未提交,遇到1205错误. java.lang.Exception: ### Error updating database.  Cause: java.sql.SQLExc ...

  8. Centos6.5 网络配置

    网络配置 本教程配置说明 以下为本教程安装时的配置,用户依据实际情况进行调整 * 在root用户权限下安装下完毕 * IP地址设置为 10.10.108.160 * 本机DNS设置为 8.8.8.8 ...

  9. 微信管理系统基于Flask+Vue+Celery+SQLAlchemy+Redis等实现

    https://zhuanlan.zhihu.com/p/28102858 现在绝大多数同学都在使用微信,不过微信有很多限制,比如: 微信聊天记录只保存在本地,换个手机那些内容就找不到了 微信扫码加群 ...

  10. Net Core 下 Newtonsoft.Json 转换字符串 null 替换成string.Empty

    原文:Net Core 下 Newtonsoft.Json 转换字符串 null 替换成string.Empty public class NullToEmptyStringResolver : De ...