记得以前刚上大一学 C 语言的时候，写的第一个程序就是在控制台上输出 HelloWorld 。当时很纳闷，为什么要输出这个。老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld，这是惯例。呵呵，想来真是令人怀念。

好了，言归正传吧。本文的主要内容也是围绕 HelloWorld，不过不是单纯的输出。

1. HTML 是怎么输出 HelloWorld 的

都知道 HTML 吧，如果不知道请下百度一下吧。在 HTML 中输出 HelloWorld 是怎样的呢，先看下面代码：

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>HelloWorld</title>
  5. </head>
  6. <body>
  7. <p>Hello World 1</p>
  8. <p>Hello World 2</p>
  9. </body>
  10. </html>

如果你学习过 HTML，应该知道会在浏览器中输出两行文字，如下图：

2. 用 JavaScript 来更改 HelloWorld

对于上面输出的内容，如果想用 JavaScript 来更改这两行文字，怎么办呢？我们会添加代码变为：

  1. <html>
  2.   <head>
  3.         <meta charset="utf-8">
  4.         <title>HelloWorld</title>
  5.   </head>
  6.     <body>
  7.     <p>Hello World 1</p>
  8.     <p>Hello World 2</p>
  9.         <script>
  10.         var paragraphs = document.getElementsByTagName("p");
  11.         for (var i = 0; i < paragraphs.length; i++) {
  12.           var paragraph = paragraphs.item(i);
  13.           paragraph.innerHTML = "I like dog.";
  14.         }
  15.         </script>
  16.     </body>
  17. </html>

结果变为：

可以看到，使用 JavaScript，我们添加了4行代码。

3. 用 D3 来更改 HelloWorld

如果使用 D3.js 来修改这两行呢？只需添加一行代码即可。注意不要忘了引用 D3.js 源文件。

  1. <html>
  2.   <head>
  3.         <meta charset="utf-8">
  4.         <title>HelloWorld</title>
  5.   </head>
  6.     <body>
  7.         <p>Hello World 1</p>
  8.         <p>Hello World 2</p>
  9.         <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  10.         <script>
  11.         d3.select("body").selectAll("p").text("www.ourd3js.com");
  12.         </script>
  13.     </body>
  14. </html>

结果会变为:

也实现同样的功能，但是却显得十分简洁。不错，其实 D3.js 中的所有功能在 JavaScript 中都能实现，它仅仅是一个函数库而已。D3 所做的事就是减轻你的工作量，以及使你的代码十分简单易懂。

接下来改变字体的颜色和大小，稍微修改上述代码：

  1. //选择<body>中所有的<p>，其文本内容为 www.ourd3js.com，选择集保存在变量 p 中
  2. var p = d3.select("body")
  3.           .selectAll("p")
  4.           .text("www.ourd3js.com"); 
  5.  
  6. //修改段落的颜色和字体大小
  7. p.style("color","red")
  8. .style("font-size","72px");

上面的代码是先将选中的元素赋值给变量 p，然后通过变量 p 来改变样式，这样可以使代码更整洁。

这里涉及一个概念：选择集

使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。

另外，有人会发现，D3 能够连续不断地调用函数，形如：

d3.select().selectAll().text()

这称为链式语法，和 JQuery 的语法很像，常用 JQuery 的朋友一定会感到很亲切。

【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld的更多相关文章

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

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

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

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

  3. 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

  4. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  5. 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...

  6. 【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...

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

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

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

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

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

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

随机推荐

  1. jQuery 层级选择器 + keyCode

    层次选择器 如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择. 层次选择器规则如下: 层次选择器 选 择 器 描 述 返 ...

  2. MVC-03 控制器（3）

    Controller负责处理浏览器来的所有要求,并决定响应什么属性给浏览器,以及协调Model与View之间的数据传递.在ASP.NET MVC中有好几种传递数据给视图的方式,例如从ASP.NET M ...

  3. Linux批量重命名文件

    五种方法实现Linux批量重命名文件 Linux批量重命名文件是指对某些特定的文件统一进行重新命名,以改变原来一批文件的名称,这里介绍五种方法来实现. Linux批量重命名文件会涉及到改变一个字母.改 ...

  4. poj 1077 Eight(双向bfs)

    题目链接:http://poj.org/problem?id=1077 思路分析:题目要求在找出最短的移动路径,使得从给定的状态到达最终状态. <1>搜索算法选择:由于需要找出最短的移动路 ...

  5. 黄聪：Python 字符串操作（string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等）

    去空格及特殊符号 s.strip().lstrip().rstrip(',') 复制字符串 #strcpy(sStr1,sStr2) sStr1 = 'strcpy' sStr2 = sStr1 sS ...

  6. 【水一发next_permutation】poj 1146——ID Codesm

    来源:点击打开链接 求字典序下一位,没有直接输出没有.全排列函数秒水过. #include <iostream> #include <algorithm> #include & ...

  7. 搜狗2015校园招聘javaproject师面经

    面试时看到了我的笔试题.真是慘不忍睹啊. . 1. 问回去有没有研究一下笔试题 木有,果断后面悲剧了 2. 解释一下笔试的一道选择题: 下列哪种操作可能带来死锁? A: lock(m1) lock(m ...

  8. 优酷DEMO

    http://v.youku.com/v_show/id_XMTQxOTc4ODA4OA==.html http://v.youku.com/v_show/id_XMTQxOTc5MjU1Mg==.h ...

  9. openrisc 之 Wishbone总线学习笔记——总线互联

    一,总线命名规范 1,wishbone总线接口信号都是高电平有限 2,wishbone接口信号都是以 _i ,或者是 _o 结束.i表示输入, o表示输出. ()表示该信号为总线信号,总线位宽可以大于 ...

  10. （IOS）多线程开发

    一.线程的使用 以向网络请求一张图片为例 -(void)downURL:(NSURL *)aURL { NSData *d = [NSData dataWithContentsOfURL:aURL]; ...