D3.js的基础部分之选择集的处理 过滤器、选择集的顺序、each()和call()的应用(v3版本)

选择集的处理 ： 过滤器

有时候需要根据绑定数据对某选择集的元素进行过滤，例如某公司，只对id大于100的员工进行奖励。某学校只选拔身高超过170cm的学生等。类似这样的问题，需要根据条件获取选择集的一部分子集，该方法成为过滤器。

 render() {
         return (
             <div id="body" >

             </div>
         );
     }

 // 定义数组，然后过滤到小于20的数，只选取大于20的数
         var dataList = [10, 20, 30, 40, 50, 60]
             .filter(function (d, i) {
                 if (d > 20) {
                     return true
                 } else {
                     return false
                 }
             })
         //选择id为body的容器赋值给变量body
         var body = d3.select("#body")

         body.selectAll("p")
             .data(dataList)
             .enter()
             .append("p")
             .text(function (d) {
                 return d
             })

当所绑定的数据的数值大于20时，返回true，否则返回false。即只有大于20的数值才能存在，其他的被过滤掉。显示的效果为 :

 

选择集的处理 ： 选择集的顺序

sort()可以根据被绑定数据重新排列选择集中的元素。sort()的参数是一个无名函数，该函数也称作比较器。比较器的规则与JavaScript的Array.sort()一样。

 var dataList = [88,77,11,44,55,22,66,33,99,88,11,66]

         dataList.sort(function(a,b){
             return a-b
         })

         console.log(dataList)  // [11, 11, 22, 33, 44, 55, 66, 66, 77, 88, 88, 99]

         dataList.sort(function(a,b){
             return b-a
         })

         console.log(dataList)  //[99, 88, 88, 77, 66, 66, 55, 44, 33, 22, 11, 11]

 function(a,b){
     if(a<b){
         return -1;
     }else if(a> b){
         return 1
     }else{
         return 0
     }
 }

此比较函数有两个参数，当a应该位于b之前时则返回一个负数。当a位于b之后时，则返回一个正数。如果a和b相等，则返回0。根据以上规则，我们对选择集重新排序

 

选择集的处理 : each()的应用

each()允许对选择集的各元素分别处理。

 var dataList = [
             {id : 0,name:"zhangsan"},
             {id : 1,name:"lisi"},
         ]

         var body = d3.select("#body")

         body.selectAll("p")
             .data(dataList)
             .enter()
             .append("p")
             .each(function(d){
                return  d.age =18
             })
             .text(function(d,i){
                 return d.id + " " +d.name + " " +d.age
             })

上面代码中，被绑定的数据里没有age属性，然后我们通过each()函数为每一项添加了age属性，最后在text()中使用了此新属性。

 

选择集的处理 : call()的应用

call()允许将选择集自身作为参数，传递给某一函数。如

 d3.selectAll("div").call(myfun)

这段代码将选择集作为参数传递给myfun函数使用。等同于一下代码 :

 function myfun(seleciton){
     //在这里进行相关操作
     seleciton.attr("name","value");
 }
 myfun(d3.selectAll("div"))

在以后我们做图表的时候，可能会做拖拽，缩放等操作。那时候就会经常用到call()了。这里先简单了解一下即可。