【 D3.js 選擇集與數據詳解 — 4 】 enter和exit的處理方法以及處理模板

時間 2019-12-11

標籤 d3.js 選擇數據詳解 enter exit 處理方法以及模板欄目 JavaScript 简体版

原文原文鏈接

綁定數據以後，選擇集分爲三部分：update、enter、exit。這三部分的處理辦法是什麼呢？本文將講解其處理方法，以及一個經常使用的處理模板。javascript

1. enter的處理方法

若是沒有足夠的元素，那麼處理方法一般是使用append()添加元素。請看下面的代碼：java

	<body>
		<p></p>
		<script>
		var dataset = [3, 6, 9];
		var p = d3.select("body").selectAll("p");

//綁定數據後，分別獲取update和enter部分
		var update = p.data(dataset);
		var enter = update.enter();
		
//update部分的處理方法是直接修改內容
		update.text( function(d){ return d; } );

//enter部分的處理方法是添加元素後再修改內容
		enter.append("p")
			.text(function(d){ return d; });
		</script>
	</body>

本例中，body中的p元素只有一個，可是數據有三個，所以enter部分包含多餘的兩個數據。對多餘數據的處理方法就是append元素，與之對應。通過處理後，body裏有三個p元素，內容分別爲：數組

<p>3</p>
<p>6</p>
<p>9</p>

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

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

上述代碼中，selectAll選擇了一個空集，而後綁定了數據。因爲選擇集爲空，那麼data()返回的update部分爲空。而後調用enter()和append()，使得每個數據都有元素p與之對應。最後再更改p元素的內容。即enter部分的常見處理方法是使用append()添加元素。app

2. exit的處理方法

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

var dataset = [10, 20, 30];
	var p = d3.select("body").selectAll("p");

//綁定數據以後，分別獲取update部分和exit部分
	var update = p.data(dataset);
	var exit = update.exit();

//update的部分的處理方法是修改內容
	update.text( function(d){ return d; } );

//exit部分的處理方法是刪除
	exit.remove();

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

3. 處理模板

通過上兩節的內容，知道了如何處理多餘的數據和元素。可是，有時候咱們不知道是數據多，仍是元素多，或者容許用戶決定誰多誰少。對於事前不知道數組長度或元素數量的問題，可定義一套處理的模板。請看以下代碼：code

var dataset = [10, 20, 30];
var p = d3.select("body").selectAll("p");
		
		//綁定數據後，分別返回update、enter、exit部分
		var update = p.data(dataset);
		var enter = update.enter();
		var exit = update.exit();
		
		//1.update部分的處理方法
		update.text( function(d){ return d; } );
		
		//2.enter部分的處理方法
		enter.append("p")
			.text( function(d){ return d; } );
		
		//3.exit部分的處理方法
		exit.remove();

如此，則不須要考慮網頁中是否有足夠的p元素，或者有多餘的p元素，不管是何種狀況，最終的結果一定是一個p元素對應數組中的一個項，沒有多餘的。這種方法，可稱爲有一套處理的模板，在數據須要常常更新時很經常使用。謝謝閱讀。下一篇文章將會講述如何應用該模板。blog