【 D3.js 入門系列 --- 7 】理解 update, enter, exit 的使用

阿新 • • 發佈：2019-01-15

轉載請註明出處，謝謝。

在前面幾節中反覆出現瞭如下程式碼：

	svg.selectAll("rect")  
           .data(dataset)  
           .enter()  
           .append("rect")

當所選擇的 rect 數量比繫結的資料 dataset 的數量少的時候，通常會用到以上程式碼，這一節就詳細說說當被選擇元素和資料數量不一致時該如何處理。

這一節將涉及到三個函式。

1. update() 當對應的元素正好滿足時（繫結資料數量 = 對應元素）

實際上並不存在這樣一個函式，只是為了要與之後的 enter 和 exit 一起說明才想象有這樣一個函式。但對應元素正好滿足時，直接操作即可，後面直接跟 text ，style 等操作即可。

2. enter() 當對應的元素不足時 （繫結資料數量 > 對應元素）

當對應的元素不足時，通常要新增元素，使之與繫結資料的數量相等。後面通常先跟 append 操作。

3. exit() 當對應的元素過多時（繫結資料數量 < 對應元素）

當對應的元素過多時，通常要刪除元素，使之與繫結資料的數量相等。後面通常要跟 remove 操作。

下面看看具體的用法：

<body>
		<p>AAAAAAAAA</p>
		<p>BBBBBBBBB</p>
		<p>CCCCCCCCC</p>
		
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
<script>
		
		var dataset = [ 10 , 20 , 30 , 40 , 50 ];

		var update = d3.select("body").selectAll("p").data(dataset);
		var enter  = update;
		
		update.text(function(d,i){
				return "update " + d;
			});
		
		enter.enter()
			 .append("p")
			 .text(function(d,i){
				return "enter " + d;
			});
		  
</script>  
</body>

上面的程式碼分別用了變數名 update 和 enter 來表示各自的部分，上面的程式碼的結果為：

結果圖可以看到新新增的元素 enter 的部分。改一部分程式碼，看看怎麼用 exit 。

		var dataset = [ 10 , 20 ];

		var update = d3.select("body").selectAll("p").data(dataset);
		var exit  = update;
		
		update.text(function(d,i){
				return "update " + d;
			});
		
		exit.exit()
			 .text(function(d,i){
				return "exit";
			});

結果圖為：

可以看到，呼叫 exit() 函式後，實際上是返回沒有對應資料的元素。通常我們可以刪除掉多餘的元素，如：

exit.exit()
	.remove();

尤其以 enter 函式的使用最為多見。因為通常用 D3 做資料視覺化時，我們都擁有需要的資料，而且資料量巨大，文件中很少有足夠數量的與之對應的元素。所以要特別熟練 enter 的使用方法

【 D3.js 入門系列 --- 7 】理解 update, enter, exit 的使用

轉載請註明出處，謝謝。在前面幾節中反覆出現瞭如下程式碼： svg.selectAll("rect") .data(dataset) .enter() .append("r

【 D3.js 入門系列 — 6 】讓圖表動起來

1. 什麼是動態效果前面幾章製作的圖表是一蹴而就地出現，然後繪製完成後不再發生變化的，這是靜態的圖表。動態的圖表，是指圖表在某一時間段會發生某種變化，可能是形狀、顏色、位置等，而且使用者是可以看到變化的過程的。例如，有一個圓，圓心為 (100, 100)。現在我們希

【 D3.js 入門系列 --- 3 】做一個簡單的圖表！

轉載請註明出處，謝謝。前面說了幾節，都是對文字進行處理，這一節中將用 D3.js 做一個簡單的柱形圖。做柱形圖有很多種方法，比如用 HTML 的 div 標籤，或用 svg 。推薦用 SVG 來做各種圖形。SVG 意為可縮放

【 D3.js 入門系列 --- 1 】第一個程式HelloWorld

下面開始用D3.js處理第一個簡單問題，先看下面的程式碼： <html> <head> <meta charset="utf-8"&g

【 D3.js 入門系列 --- 9 】常見視覺化圖形

轉載請註明出處，謝謝。 Layout ，直譯為“佈局，安排”。但在 D3 中不是這個意思。 D3 中有很多 Layout 函式，它們不是為了在畫面中佈局什麼，在 D3 中是對輸入的資料進行轉換，轉換成比較容易進行視覺化的資料。實際進行視覺化時，

【 D3.js 入門系列 --- 9.4 】集群圖的制作

all users bject nodes -- 部分函數選擇 water 本人的個人博客為： www.ourd3js.com csdn博客為： blog.csdn.net/lzhlzz 轉載請註明出處，謝謝。

【 D3.js 入門系列 --- 9.6 】打包圖的製作

轉載請註明出處，謝謝。打包圖（ Pack ），用於包含與被包含的關係，也表示各個物件的權重，通常用一圓套一圓來表示前者，用圓的大小來表示後者。這是各城市所屬關係的資料。我們現在要用 D3 的 layout 來轉換資料，使其容易進行視覺化處理

【 D3.js 入門系列 --- 10.2 】可拖動的地圖

轉載請註明出處，謝謝。本節是結合9.2節和10節的內容製作的一個可力學導向的中國地圖，使用者可以拖動中國的各個省份。 1. 定義各函式 var projection = d3.geo.mercator() .center(

【 D3.js 高階系列 — 5.0 】顏色

顏色是作圖不可少的概念，常用的標準有 RGB 和 HSL，D3 提供了建立顏色物件的方法，能夠相互轉換和插值。RGB色彩模式是通過對紅（Red）、綠（Green）、藍（Blue）三個顏色通道相互疊加來得到各式各樣的顏色。三個通道的值的範圍都為0~255，因此總共能表示1677

【 D3.js 高階系列 — 6.0 】值域和顏色

在【入門 - 第 10 章】作了一張中國地圖，其中各省份的顏色值都是隨意賦值的。如果要將一些值反映在地圖上，可以利用顏色的變化來表示值的變化。1. 思路例如，有值域的範圍為：[10, 500]現希望10用淺綠表示，500用深綠表示，10到500之間的值用淺綠和深綠之間的顏色表

D3.js 入門系列2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &

D3.js——理解 update, enter, exit 的使用

Update、Enter、Exit 是 D3 中三個非常重要的概念，它處理的是當選擇集和資料的數量關係不確定的情況。什麼是 Update、Enter、Exit 前幾課裡，反覆出現了形如以下的程式碼。 svg.selectAll("rect") //選擇sv

【D3.js資料視覺化系列教程】（三十）--力導向圖之帶文字

(1)連結陣列var links = [ {source: "Microsoft", target: "Amazon", type: "licensing" ,weight:1,color:1}, {source: "Microsoft", target:

【D3.js資料視覺化系列教程】（十六）--更新、過度和動畫

//(1) 準備資料集 var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; //(2) 設定SVG的高寬 var w=600; va

【 D3.js 進階系列 — 4.0 】繪製箭頭

在 SVG 繪製區域中作圖，在繪製直線和曲線時，常需要在某處新增箭頭。本文介紹如何在 D3 中給直線和曲線新增箭頭。到目前為止，我們繪製 D3 的圖表都是在 SVG 繪製區域內，雖然 D3 也可用 Canvas 或 WebGL 等作圖，但 SVG 是最常用的。那麼，用 D3

【 D3.js 進階系列 — 2.1 】力學圖的事件 + 頂點的固定

本章討論在力學圖中常用到的事件（ Event ），然後對【進階 - 第 2.0 章】的人物關係圖進行改進，使使用者能夠固定拖拽的物件。 force.on("tick", function(){ });這裡的 force 是之前程式碼中定義的佈局（ Layout ）

【 D3.js 進階系列 — 1.0 】 CSV 表格檔案的讀取

在入門系列的教程中，我們常用 d3.json() 函式來讀取 json 格式的檔案。json 格式很強大，但對於普通使用者可能不太適合，普通使用者更喜歡的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格檔案，因為簡單易懂，容易編輯。

【D3.js資料視覺化系列教程】（二十二）--互動圖表之提示條

//鍵值對資料集 var dataset = [ {key:0,value:5}, {key:1,value:10}, {key:2,value:13}, {key:3,value:19}, {key:4,value:21}, {key:5,value:25}, {key:6,value:22}, {ke

【 D3.js 進階系列 — 1.1 】其他表格檔案的讀取

CSV 表格檔案是以逗號作為單元分隔符的，其他還有以製表符 Tab 作為單元分隔符的 TSV 檔案，還有人為定義的其它分隔符的表格檔案。本文將說明在 D3 中如何讀取它們。 1. TSV 表格檔案是什麼 TSV(Tab Separated Values)，製表分隔值，它

【D3.js資料視覺化系列教程】（二十五）--載入csv檔案

csv檔案由csv資料生成的圓環! 1. 載入csv資料用到d3.csv函式，第一個引數是地址，第二個引數是個回撥函式d3.csv("http://localhost:8080/spring/D3da

【 D3.js 入門系列 --- 7 】 理解 update, enter, exit 的使用

相關推薦

【 D3.js 入門系列 --- 7 】理解 update, enter, exit 的使用