【 D3.js 入門系列 --- 1 】 第一個程式HelloWorld
阿新 • • 發佈：2019-02-04
下面開始用D3.js處理第一個簡單問題，先看下面的程式碼：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
</body>
</html>
如果想用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行程式碼，如果使用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>
與JQuery等javascript類似，能簡化javascript的使用過程。
接下來改變字型的顏色和大小，如下：
var p = d3.select("body").selectAll("p").text("www.ourd3js.com");
p.style("color","red");
p.style("font-size","72px");