日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利

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

系統(tǒng) 1960 0

? ? 本人的個(gè)人博客為: www.ourd3js.com?

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

? ? 轉(zhuǎn)載請(qǐng)注明出處,謝謝。


? ? 在前面幾節(jié)中重復(fù)出現(xiàn)了例如以下代碼:

      	svg.selectAll("rect")  
           .data(dataset)  
           .enter()  
           .append("rect") 
    
? ? 當(dāng)所選擇的 rect 數(shù)量比綁定的數(shù)據(jù) dataset 的數(shù)量少的時(shí)候,一般會(huì)用到以上代碼,這一節(jié)就具體說說當(dāng) 被選擇元素和數(shù)據(jù)數(shù)量不一致時(shí) 該怎樣處理。

? ? 這一節(jié)將涉及到三個(gè)函數(shù)。

1. update() ? ?當(dāng)相應(yīng)的元素正好滿足時(shí) ( 綁定數(shù)據(jù)數(shù)量 = 相應(yīng)元素 )

? ? 實(shí)際上并不存在這樣一個(gè)函數(shù),僅僅是為了要與之后的 enter 和 exit 一起說明才想象有這樣一個(gè)函數(shù)。但相應(yīng)元素正好滿足時(shí),直接操作就可以,后面直接跟 text ,style 等操作就可以。

2. enter() ? ?當(dāng)相應(yīng)的元素不足時(shí) ?( 綁定數(shù)據(jù)數(shù)量 > 相應(yīng)元素 )

? ? 當(dāng)相應(yīng)的元素不足時(shí),通常要加入元素,使之與綁定數(shù)據(jù)的數(shù)量相等。后面通常先跟 append 操作。

3. exit() ? ? ?當(dāng)相應(yīng)的元素過多時(shí)?( 綁定數(shù)據(jù)數(shù)量 < 相應(yīng)元素 )

? ? 當(dāng)相應(yīng)的元素過多時(shí),通常要?jiǎng)h除元素,使之與綁定數(shù)據(jù)的數(shù)量相等。后面通常要跟 remove 操作。


? ? 以下看看詳細(xì)的使用方法:

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

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

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




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


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系: 360901061

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

【本文對(duì)您有幫助就好】

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

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板: 宁晋县| 景洪市| 错那县| 柘城县| 繁峙县| 巴东县| 黄骅市| 灵山县| 万山特区| 德清县| 抚宁县| 故城县| 左贡县| 白山市| 纳雍县| 福清市| 定州市| 奉化市| 兴义市| 定结县| 清新县| 蒙阴县| 图片| 巩留县| 晋城| 铜山县| 武宣县| 永年县| 逊克县| 当阳市| 昆明市| 安陆市| 卫辉市| 平远县| 西和县| 高雄市| 信宜市| 溧阳市| 华坪县| 昌乐县| 黑山县|