<html> 
  <head> 
        <meta charset="utf-8"> 
        <title>HelloWorld</title> 
  </head> 
    <body> 
        <p>Hello World 1</p>
        <p>Hello World 2</p>
    </body> 
</html>

如果你學(xué)習(xí)過 HTML，應(yīng)該知道會(huì)在瀏覽器中輸出兩行文字，如下圖：

http://wiki.jikexueyuan.com/project/d3wiki/images/hello-1.png" alt="html輸出兩行段落" />

用 JavaScript 來更改 HelloWorld

對(duì)于上面輸出的內(nèi)容，如果想用 JavaScript 來更改這兩行文字，怎么辦呢？我們會(huì)添加代碼變?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>

結(jié)果變?yōu)椋?/p>

http://wiki.jikexueyuan.com/project/d3wiki/images/hello-2.png" alt="用 JavaScript 更改段落元素" />

可以看到，使用 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>

結(jié)果會(huì)變?yōu)椋?/p>

http://wiki.jikexueyuan.com/project/d3wiki/images/hello-3.png" alt="用 D3.js 更改段落元素" />

也實(shí)現(xiàn)同樣的功能，但是卻顯得十分簡(jiǎn)潔。不錯(cuò)，其實(shí) D3.js 中的所有功能在 JavaScript 中都能實(shí)現(xiàn)，它僅僅是一個(gè)函數(shù)庫(kù)而已。D3 所做的事就是減輕你的工作量，以及使你的代碼十分簡(jiǎn)單易懂。

接下來改變字體的顏色和大小，稍微修改上述代碼：

//選擇<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 來改變樣式，這樣可以使代碼更整潔。

這里涉及一個(gè)概念：選擇集

使用 d3.select() 或 d3.selectAll() 選擇元素后返回的對(duì)象，就是選擇集。

另外，有人會(huì)發(fā)現(xiàn)，D3 能夠連續(xù)不斷地調(diào)用函數(shù)，形如：

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

這稱為鏈?zhǔn)秸Z法，和 JQuery 的語法很像，常用 JQuery 的朋友一定會(huì)感到很親切。

上一篇：第十三章餅狀圖的制作下一篇：第五章做一個(gè)簡(jiǎn)單的圖表

<b id="dnoff"></b>

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

第二章 第一個(gè)程序 HelloWorld

HTML 是怎么輸出 HelloWorld 的

用 JavaScript 來更改 HelloWorld

用 D3 來更改 HelloWorld

第二章第一個(gè)程序 HelloWorld