记得以前刚上大一学 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，应该知道会在浏览器中输出两行文字，如下图：

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

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>

结果变为：

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

可以看到，使用 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 入门系列 — 1 】第一个程序 HelloWorld

也实现同样的功能，但是却显得十分简洁。不错，其实 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&period;js 入门系列 — 11 】入门总结
D3 新专题首页一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
【 D3&period;js 入门系列 --- 1 】第一个程序HelloWorld
下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...
【 D3&period;js 入门系列 --- 2&period;1 】关于如何选择，插入，删除元素
在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...
【 D3&period;js 入门系列 --- 2 】如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
【 D3&period;js 入门系列 --- 2 】怎样使用数据和选择元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...
【 D3&period;js 入门系列 --- 2&period;1 】关于怎样选择，插入，删除元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...
【 D3&period;js 入门系列 --- 3 】做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
【 D3&period;js 入门系列 --- 0 】简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...
【 D3&period;js 入门系列 --- 0 】简介及安装
家是我的个人博客: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...

随机推荐

BinaryWriter和BinaryReader用法
C#的FileStream类提供了最原始的字节级上的文件读写功能,但我们习惯于对字符串操作,于是StreamWriter和 StreamReader类增强了FileStream,它让我们在字符串级 ...
log4net 将日志写入数据库
asp.net利用log4net写入日志到SqlServer数据库,Log4net是一个开源的错误日志记录项目,易用性强,源自log4j,品质值得信赖. 下面就我的安装部署log4net到MS sql ...
Struts标签&lt&semi;s&colon;iterator&gt&semi;遍历访问复杂Map对象
<s:iterator value="resultType" id="geneUi"> //拿到要遍历的Map对象 <s:iterator v ...
敏捷测试（7）--基于story的敏捷基础知识
基于story的敏捷基础知识----迭代启动会.迭代回顾会除需求讲解意外,需要所有团队成员参加的会议仅有两个,分别是"迭代启动会"和"迭代回顾会". (1)迭 ...
Failed to create the Java Virtual Machine(zt)
http://lixueli26.iteye.com/blog/711152 在以下版本也发生类似情况,采用同样方法得以解决. 版本:eclipse-jee-indigo-win32 自己电脑上装的j ...
php生出随机字符串
function generateRandomString($length = 10) { $characters = '0123456789abcdefghijklmnopqrstuvwxyzABC ...
好文：javascript中的四种循环
https://juejin.im/entry/5a1654e951882554b8373622?utm_medium=hao.caibaojian.com&utm_source=hao.ca ...
Android 开发自己的网络收音机2——电台列表（SlidingMenu侧滑栏）
上一篇文章总体规划了这个项目的情况,今天讲讲实现电台列表.今天其实主要想讲解的是SlidingMenu,也就是我们平时说的侧滑栏,现在很多应用都有用这种UI效果.SlidingMenu侧滑栏功能实现的 ...
关于session销毁的问题，invalidate() 和removeAttribute()
request.getSession().invalidate(); 销毁当前会话域中的所有属性 request.getSession().removeAttribute("username ...
ctci1&period;8
bool isSub(string str0, string str1){ if(str0.length() != str1.length()) return false; ...

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

1. HTML 是怎么输出 HelloWorld 的

2. 用 JavaScript 来更改 HelloWorld

3. 用 D3 来更改 HelloWorld

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

随机推荐

相关文章

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

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