亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

【 D3.js 入門系列 --- 7 】 理解 update, ente

系統 1680 0

? ? 本人的個人博客為: www.ourd3js.com?

? ? csdn博客為: blog.csdn.net/lzhlzz ?

? ? 轉載請注明出處,謝謝。


? ? 在前面幾節中重復出現了例如以下代碼:

      	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 來表示各自的部分,上面的代碼的結果為:

? ? ? ? ? ? 【 D3.js 入門系列 --- 7 】 理解 update, enter, exit 的使用
? ? 結果圖能夠看到新加入的元素 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";
			});
      
? ? 結果圖為:
? ?? 【 D3.js 入門系列 --- 7 】 理解 update, enter, exit 的使用
? ? 能夠看到,調用 exit() 函數后,實際上是返回沒有相應數據的元素。通常我們能夠刪除掉多余的元素,如:
        exit.exit()
	.remove();
      

? ? 尤其以 enter 函數的使用最為多見。由于通經常使用 D3 做數據可視化時,我們都擁有須要的數據,并且數據量巨大,文檔中非常少有足夠數量的與之相應的元素。所以要特別熟練 enter 的用法




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


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!??!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 四只虎免费永久观看地址 | 2021国产精品自产拍在线观看 | 日韩中文字幕一区二区不卡 | 九热视频在线观看 | 国产第一亚洲 | 国产91精品一区二区麻豆网站 | 91青青青青青爽在线 | 香蕉超级碰碰碰97视频蜜芽 | 久久久国产这里有的是精品 | 亚洲精品久久久久久中文字幕小说 | 国产精品福利自产拍网站 | 日本xxxx色视频在线观看免 | 日本在线黄色 | 日本边添边爱边做视频 | 亚洲综合成人在线 | 国产伦精品一区二区三区四区 | 四虎影视在线看免费观看 | 亚洲免费人成在线视频观看 | 日韩一二区 | 老头老太做爰xxx视频 | 久久国产精品99久久久久久老狼 | 午夜久久久久久网站 | 日韩国产午夜一区二区三区 | 国产精品麻豆99久久 | xxxxyoujizz护士| 久久久精品免费热线观看 | 国产午夜精品福利视频 | 国产精品福利视频一区二区三区 | 国产成人精品曰本亚洲 | 国产精品99久久久久久www | 天天操天天玩 | 亚洲精品欧美日本中文字幕 | 久久这里只有精品99 | 久久精品日本免费线 | 一区二区精品视频 | 91av国产精品| 精品日本久久久久久久久久 | 欧美一区二区三区精品国产 | 手机在线看片国产日韩生活片 | 亚洲最大视频网 | 色综合天天色综合 |