d3.js--04(enter和exit)

時間 2019-11-09

原文原文鏈接

enter()html

當DOM數量少於data的數量，或者壓根一個都沒有的時候，咱們通常會但願讓程序幫忙建立。數組

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>柱狀圖</title>
 6 </head>
 7 <body>
 8 
 9 <svg>
10     <rect></rect>
11     <rect></rect>
12 </svg>
13 <script src="d3.js"></script>
14 <script>
15 
16     var dataset = [250, 210, 170, 130, 90];  //數據（表示矩形的寬度）
17     var rectHight = 25;
18     var svg = d3.select('svg');
19     svg.attr('width', 300)
20         .attr('height', 300)
21         .attr('fill', 'red');
22     var rect = svg.selectAll('rect');
23 
24     //綁定數據後，分別獲取update和enter部分
25     var update = rect.data(dataset);
26     var enter = update.enter();
27 
28     //update部分的處理方法是直接修改內容
29 
30     update.attr('x', 20)
31         .attr('y', function (d, i) {
32             return i * rectHight;
33         })
34         .attr('width', function (d) {
35             return d;
36         })
37         .attr('height', rectHight - 2);
38 
39     //enter部分的處理方法是添加元素後再修改內容
40     enter.append('rect')
41         .attr('x', 20)
42         .attr('y', function (d, i) {
43             return i * rectHight;
44         })
45         .attr('width', function (d) {
46             return d;
47         })
48         .attr('height', rectHight - 2);
49 
50 
51 </script>
52 
53 
54 </body>
55 </html>

一般，從服務器讀取文件後，數據是有的，可是網頁中是沒有元素的。這是D3一個很重要的特性，便可以選擇一個空集，而後使用enter().append()的形式來插入元素。假設如今body裏沒有p元素，請看以下代碼服務器

1 var dataset = [10,20,30,40,50]; 
2 var body = d3.select("body"); 
3 body.selectAll("p") //選擇body中全部p，但因爲沒有p，因此選擇了一個空集 
4  .data(dataset)  //綁定dataset數組 
5  .enter()   //返回enter部分 
6  .append("p")  //添加p元素 
7  .text(function(d){ return d; });

exit()app

與enter()相反，exit()是用來選擇那些與數據相比多出來的DOM元素。svg

在下面例子中，咱們多提供了一個DOM元素：spa

1 <body>
2  <p></p>
3  <p></p>
4  <p></p>
5  <p></p>
6 </body>

這回就容易理解了，由於是多出來的，那麼就是實際存在的，即最後一個<p>。code

多出來的話，咱們能夠接着用.remove()移除這些元素，代碼以下：htm

1 d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();

exit的處理方法blog

有多出的元素，沒有數據與之對應。對於這樣的元素，一般的作法是使用remove()刪除元素。假設body中有5個p元素，請看以下代碼：ip

1 var dataset = [10, 20, 30]; 
2  var p = d3.select("body").selectAll("p"); 
3 //綁定數據以後，分別獲取update部分和exit部分 
4  var update = p.data(dataset); 
5  var exit = update.exit(); 
6 //update的部分的處理方法是修改內容 
7  update.text( function(d){ return d; } ); 
8 //exit部分的處理方法是刪除 
9  exit.remove();

這段代碼中，對於exit部分的處理方法是刪除。刪除以後，網頁中將不會有多餘的p元素。

相關標籤/搜索

每日一句

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