先嘗試用 D3 寫第一個 HelloWorld 程序侵俗。學編程入門的第一個程序都是在屏幕上輸出 HelloWorld亲配，本課稍微有些不同构灸，不是單純的輸出。
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茉盏，應該知道會在瀏覽器中輸出兩行文字，如下圖：
用 JavaScript 來更改 HelloWorld
對于上面輸出的內(nèi)容枢冤，如果想用 JavaScript 來更改這兩行文字鸠姨，怎么辦呢？我們會添加代碼變?yōu)椋?/p>
<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>
結果變?yōu)椋?/p>
可以看到淹真，使用 JavaScript讶迁，我們添加了4行代碼。
用 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>
結果會變?yōu)椋?/p>
也實現(xiàn)同樣的功能值纱，但是卻顯得十分簡潔鳞贷。不錯，其實 D3.js 中的所有功能在 JavaScript 中都能實現(xiàn)虐唠，它僅僅是一個函數(shù)庫而已搀愧。D3 所做的事就是減輕你的工作量，以及使你的代碼十分簡單易懂疆偿。
接下來改變字體的顏色和大小咱筛，稍微修改上述代碼：
//選擇<body>中所有的<p>，其文本內(nèi)容為 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() 選擇元素后返回的對象饲趋，就是選擇集拐揭。
另外，有人會發(fā)現(xiàn)奕塑，D3 能夠連續(xù)不斷地調(diào)用函數(shù)堂污，形如：
d3.select().selectAll().text()
這稱為鏈式語法，和 JQuery 的語法很像龄砰，常用 JQuery 的朋友一定會感到很親切盟猖。
