【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候，写的第一个程序就是在控制台上输出 HelloWorld 。当时很纳闷，为什么要输出这个。老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld，这是惯例。呵呵，想来真是令人怀念。
好了，言归正传吧。本文的主要内容也是围绕 HelloWorld，不过不是单纯的输出。
1. HTML 是怎么输出 HelloWorld 的
都知道 HTML 吧，如果不知道请下百度一下吧。在 HTML 中输出 HelloWorld 是怎样的呢，先看下面代码：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
</body>
</html>
如果你学习过 HTML，应该知道会在浏览器中输出两行文字，如下图：
2. 用 JavaScript 来更改 HelloWorld
对于上面输出的内容，如果想用 JavaScript 来更改这两行文字，怎么办呢？我们会添加代码变为：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.innerHTML = "I like dog.";
}
</script>
</body>
</html>
结果变为：
可以看到，使用 JavaScript，我们添加了4行代码。
3. 用 D3 来更改 HelloWorld
如果使用 D3.js 来修改这两行呢？只需添加一行代码即可。注意不要忘了引用 D3.js 源文件。
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.select("body").selectAll("p").text("www.ourd3js.com");
</script>
</body>
</html>
结果会变为:
也实现同样的功能，但是却显得十分简洁。不错，其实 D3.js 中的所有功能在 JavaScript 中都能实现，它仅仅是一个函数库而已。D3 所做的事就是减轻你的工作量，以及使你的代码十分简单易懂。
接下来改变字体的颜色和大小，稍微修改上述代码：
//选择<body>中所有的<p>，其文本内容为 www.ourd3js.com，选择集保存在变量 p 中
var p = d3.select("body")
.selectAll("p")
.text("www.ourd3js.com"); //修改段落的颜色和字体大小
p.style("color","red")
.style("font-size","72px");
上面的代码是先将选中的元素赋值给变量 p，然后通过变量 p 来改变样式，这样可以使代码更整洁。
这里涉及一个概念：选择集
使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。
另外，有人会发现，D3 能够连续不断地调用函数，形如：
d3.select().selectAll().text()
这称为链式语法，和 JQuery 的语法很像，常用 JQuery 的朋友一定会感到很亲切。
【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld的更多相关文章
- 【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
- 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...
- 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素
在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...
- 【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 【 D3.js 入门系列 --- 0 】 简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...
- 【 D3.js 入门系列 --- 0 】 简介及安装
家是我的个人博客: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...
随机推荐
- hdu 2815 Mod Tree 高次方程，n不为素数
Accepted 406MS 8576K 2379 B C++/** 这里加了一点限制,,大体还是一样的,, **/ #include <iostream> #include <cs ...
- LintCode- 删除排序数组中的重复数字
题目描述: 给定一个排序数组,在原数组中删除重复出现的数字,使得每个元素只出现一次,并且返回新的数组的长度. 不要使用额外的数组空间,必须在原地没有额外空间的条件下完成. 样例 给出数组A =[1,1 ...
- 微软Xbox360 E与微软Xbox360 slim Kinect套装(1TB)哪个好
原文地址:http://product.pchome.net/digi_home_playstation_microsoft_xbox360slimkinect1tb/381793.html 微软Xb ...
- VB6.0快捷键大全(转)
窗体设置,控件布局时用: alt+v+x可以快速显示出工具框 Alt+P+N 引用 ctrl+左右键头可以移动控件 shift+左右键头调整控件大小 F7 切换到编辑窗口 Shift+f7 切换代 ...
- Linux计时体系结构
[Linux操作系统分析]定时测量——RTC,TSC,PIT,jiffies,计时体系结构,延迟函数 1 基本概念 定时机制连同一些更可见的内核活动(如检查超时)来驱使进程切换. 两种主要的定时测 ...
- webscraping documentation — webscraping documentation
webscraping documentation - webscraping documentation webscraping documentation¶ Introduction Backgr ...
- powerdesigner数据建模
目标: 本文主要介绍PowerDesigner中概念数据模型 CDM的基本概念.一.概念数据模型概述数据模型是现实世界中数据特征的抽象.数据模型应该满足三个方面的要求:1)能够比较真实地模拟现实世界2 ...
- Google启封后依然不能用
门事件周年纪念日过后一段时间,狗狗启封了,但撸主的狗狗仍旧不能用,突然想起来之前帆樯时候改动了某些配置,比方hosts文件,这个文件的路径为:C:\Windows\System32\drivers\e ...
- BZOJ 1230: [Usaco2008 Nov]lites 开关灯( 线段树 )
线段树.. --------------------------------------------------------------------------------- #include< ...
- 条款21： 必须返回对象时，不要强行返回对象的reference
总结: 绝不要返回一个local栈对象的指针或引用:绝不要返回一个被分配的堆对象的引用:绝不要返回一个静态局部对象(为了它,有可能同时需要多个这样的对象的指针或引用). 条款4中给出了“在单线程环境中 ...