標籤：d3js helloworld html javascript select
有興趣的朋友歡迎來http://www.ourd3js.com/ 討論
下面開始用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>如果你學習過HTML，應該知道會在螢幕中輸出兩行文字，如：
<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> 結果變為：
<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> 結果會變為:
接下來改變字型的顏色和大小，如下：
var p = d3.select("body").selectAll("p").text("www.ourd3js.com");p.style("color","red");p.style("font-size","72px");
可以看到上面的代碼先給變數p賦值，再使用p。這樣可以使代碼更整潔。Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
