D3.js學習記錄【轉】【新】

時間 2019-11-13

原文原文鏈接

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 5     <title>D3學習記錄</title>
 6     
 7     <style>
 8     
 9     .chart{
10         background-color: #3498db;
11         text-align: right;
12         padding: 3px;
13         margin: 1px;
14         color: white;
15     }
16     
17     </style>
18     <!-- 導入D3.js -->
19     <script src="js/d3.v3.min.js"></script>
20     
21 </head>
22 <body>
23     <script>
24     //create a data
25     var data = [4, 8, 5, 2, 10, 20];
26     
27     //建立一個容器
28     var chart = d3.select("body")//選擇元素
29                     .append("div")//建立並添加新元素到選定元素後
30                     .attr("class", "chart");//設置或獲取指定屬性
31     //向容器中添加幾個div元素
32     chart.selectAll("div")//選擇該元素的多個子元素組成元素集
33             .data(data)//設置或獲取一組元素的綁定數據dataSet
34             .enter()//返回一個新的綁定了數據的元素
35             .append("div")
36             .style("width", function(d){
37                 return d*10 + 'px';
38             })
39             .text(function(d){
40                 return d;
41             })
42     </script>
43 </body>
44 </html>

D3.js也是一個javascript框架，像jquery同樣，只不過他的特長是在數據可視化這一塊而已。因此不要以爲D3是多麼的複雜。在上面的代碼中咱們能夠看到D3的一些用法：javascript

　　選擇元素：d3.select(「element」)，這個就是jquery中的$()，只不過沒有采用簡寫的形式。html

　　建立並添加新元素到選定元素後：.append("element")，就是javascript中的append方法同樣，他返回的是一個添加了該新元素的元素集。java

　　設置或獲取指定屬性：.attr(name[, value])，同jquery中的attr()。jquery

D3.js採用的是像jquery中的鏈式方法，在執行一個操做後能夠繼續調用其餘的方法，可是，咱們須要注意的是，前一個方法的輸出類型必需要和下一個方法的輸入類型相匹配！app

　　選擇所選的元素中的多個子元素組成新的選擇集:selectAll("obj")，建立一個selection，這樣咱們能夠往裏面填充數據。不過如今的選擇集尚未插入到文檔，由於咱們還要給這些空的選擇集加入數據，框架

　　設置或獲取一組元素的綁定數據：.data(dataset)，這樣selection分配數據了，D3會根據數據來進行合理的分配，分配好了，這些selection下一步該插入到文檔中了，學習

　　返回一個新的、綁定了數據的元素：.enter()，這樣子咱們的以前建立的election就能夠使用了。他們在DOM中有了本身的位置，咱們終於能夠往他身上進行操做了！ui

　　設置HTML屬性：.attr()spa

　　設置CSS樣式：.style()code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。