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


        本人的个人博客为: 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 来表示各自的部分,上面的代码的结果为:

               
        结果图能够看到新加入的元素 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 的用法




  • 相关阅读:
    css浮动
    css各种元素最原始的表现
    css3 unset属性
    js类式继承
    javascript编写Tab选项卡
    javaScript事件冒泡
    javascript中的&&与||的用法
    比较好的前端网站
    原生js开发tab选项卡之闭包
    冒泡排序(中级版)
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4299935.html
Copyright © 2020-2023  润新知