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

系统 1504 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条评论