zoukankan      html  css  js  c++  java
  • 【 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 的用法




  • 相关阅读:
    腾讯云大数据套件Hermes-MR索引插件使用总结
    【文智背后的奥秘】系列篇——文本聚类系统
    【文智背后的奥秘】系列篇——关键词智能提取
    微信Tinker的一切都在这里,包括源码(一)
    腾讯云CMQ消息队列在Windows环境下的使用
    树莓派使用modbus与stm32通信
    Ubuntu manjaro 17.10 UTC
    如何彻底禁止360浏览器弹窗
    CentOS DesktopEntry
    centos7 安装qt
  • 原文地址:https://www.cnblogs.com/gcczhongduan/p/4299935.html
Copyright © 2011-2022 走看看