精通D3.js学习笔记基础的函数

Posted 快乐~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了精通D3.js学习笔记基础的函数相关的知识,希望对你有一定的参考价值。

买了本吕大师的d3可视化。最近来学习一下,做个笔记。
 
1.选择元素  select(第一元素) 和selectAll(全部的元素)
     类似css的选择器。也可以是dom选中的。 var impotant = document.getElementById("important"); d3.select(important);
     getElementById  使用select    getElementsByClassName  使用selectAll
2、选择集
     d3.select  and d3.selectAll 返回的对象是选择集
3、状态函数3个
     console .log(p.empty()); 如果空,返回true,不空返回false
     console .log(p.node ());返回第一个非空元素,如果选择集为空,返回null
     console .log(p.size());返回选择集的个数
     false
     <p style=?"color:? red;? font-size:? 72px;?">?Hello,world?</p>?
     1
4、属性函数6个
1/attr() d3.select("p").attr("id","para")  设置一个id=para;
 可以设置属性:
var svg = d3. select( "body" )
                            .append( "svg")
                           . attr ("width" ,width)
                            . attr( "height" ,height);
               svg.append("circle" )
                 .attr ( "cx", "50px" )
                 .attr ( "cy", "50px" )
                 .attr ( "r", "50px" )
                 .attr ( "fill", "red" );
2/classed
     d3.select("p").attr("class","red bigsizre")
     d3.select("p").classed("red",true).classed("bigsize",false)   是一样的。true开启false是关闭
3/style
     d3.select("p").style("color","red").style("font-size","30px")
     d3.select("p").style({"color":"red","font-size":"30px"})
4/property   设置attr不能设置的属性比如input 的value
     d3.select("p").select("#fname").property("value","Lisi")
5/text  innerText  一样
6/html inner Html  一样
 
 5、添加、删除、插入
selection.append(name)
selection.insert(name)
selection.remove(name)    
     <body>
           < p>Cat</p >
           < p id= "plane">plane</p >
           < p>Ship</p >
     </ body>
     < script>
            var body = d3.select( "body");
           body.append( "p").text ("Train");
           body.insert( "p","#plane" ).text( "Bike");
           plane.remove();
      </script>
 
6、datum 数据绑定 对于选择集中的每一个元素,都加一个_data_属性。
 
var p = d3.select("body").selectAll("p");
p.datum("string")
     .text(function(d,i){
          return d + " " + i;   //d是datum数据  i 是index索引 
     });
7、data()能将数组各项分分别绑定到选择集的个元素上。并且能指定绑定的规则。
     绑定的顺序:指定一个id值。persins = [{id:6,name:"张三"},{id:9 , name:"李四"} , {id : 3 , name:"王五"}];
p.data(persons,function(d){return d.id;}).text(function(d){return d.id + " : " + d.name});
 
显示:<p>3:王五</p>    <p>6:张三</p>     <p>9:李四</p>
 
 
8、选择集的处理
处理模板
var dataset = [10,20,30];
var p = d3.select("body").selelctAll("p");
var update = p.data(dataset);
var enter = update.enter();
var exit = update.exit();
 
update.text(function(d){return d;});
 
enter.append("p").text(function(d){return d;})
 
exit.remove();
 
 
9、过滤器filter
 
selection.filter(function(d,i){
     if(d>20)
          rutrun true;
     else
          return false;
});
 
10、sort()排序
 
selection.sort(function(a,b){
     return b-a;
});
 
11、each()遍历
p.data(persons).each(function(d,i){d.age = 20;}).text(function(d,i){return d.id + "" + d.name + "" + d.age;})
 
在每一项的添加age  
 
12、call() 允许将选择集自身作为参数,传递给某一个函数
d3.selectAll("div").call(myfun)   ====    function myfun(selection) {}  myfun(d3.selectiAll("div"));
 
 
12、数组的处理
排序
//         var number = [54,23,77,11,34];
            var number = new Array(54, 23,77 ,11, 34);
//   number.sort(d3.ascending);  //递增函数
//   number.sort(d3.descending)  //递减函数
//   number.sort(function(a,b){   //递增函数
//         return a-b;
//   })
//   number.sort(function(a,b){   //递减函数
//         return a-b;
//   })
13、min max extent 
var minAcc = d3.min(number, function(d ){return d *3});
      var maxAcc = d3.max(number, function(d ){return d -5});
      var extentAcc = d3.extent(number, function(d ){return d %7});
      console.log(minAcc,maxAcc,extentAcc)
      var numbers = [69, 11,undefined ,53, 27,82 ,34, NaN];
sum 求和 mean 平均数     
      var sum = d3.sum(numbers,function( d){return d/3 });
      var mean = d3.mean(numbers);
      console.log(sum,mean)
 
14、median   求出数组的中间值,如果数组是空,则返回undefined
 
d3.quantile(numbers,p)
取出p分位点的值,p的范围为[0,1]需先排序
 
var numbers = [3, 1,10 ];
console.log(d3.quantile(numbers.sort(d3.ascending),0.5))  ;//3
15、d3.variance  方差
   d3.deviation      标准差
 
16、d3.bisectLeft()   获取某数组项左边的位置
       d3.bisect()   获取某数组项右边的位置
       d3.bisectRight() 和bisect()一样     可以配合splice() 使用
   var numbers = [10, 13,16 ,19, 22,25 ];
   var iLeft = d3.bisectLeft(numbers.sort(d3.ascending), 16);
   numbers.splice(iLeft, 0,77 );//在16的前面加上一个77
   numbers.splice(iLeft, 1);  //删除一项
17、d3.shuffle  随机排序数组
      d3.merge(arrays)  合并两个数组
      d3.pairs(array) 返回邻接的数组对   
   var numbers = [10, 13,16 ,19, 22,25 ];
   var pairs = d3.pairs(numbers);
   console.log(pairs); [10,13][16,19],...
 
18、d3.range([start,]stop[,step]);返回等差数列
var a = d3.range( 10);
console.log(a)  //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
var b = d3.range( 2,10 );
console.log(b);//[2, 3, 4, 5, 6, 7, 8, 9]
 
var c = d3.range( 2,10 ,2);
console.log(c);//[2, 4, 6, 8]
 

19、d3.permute(array,indexes):根据指定的索引号数组返回排序后的数组

var ani = ["cat" , "bog" , "bird"];
var newani = d3.permute(ani,[1, 0,2 ]);
console.log(newani);//["bog", "cat", "bird"]
 
d3.zip(arrays):用多个数组来制作数组的数组
 
//求两个数组的内积
var a = [10, 20,5 ];
var b = [-5 ,10, 3];
var ab = d3.sum(d3.zip(a,b) , function( d){return d[0] *d[1 ]});
console.log(ab)//165   [[10,-5] , [20,10] , [5,3]] [-50,200,15] 
d3.transpose(matrix):求转换矩阵
var a = [[1, 2,3 ] , [4, 5,6 ] ]
var t = d3.transpose(a);
console.log(t); [[1,4],[2,5],[3,6]]
 
20、映射()map
d3.map([object],[key])  :构造映射。第一个参数是源数组,
d3.map([object][,key]) 构造映射,第一个参数是数据源,第二个参数用于指定映射的key
d3.has(key) 指定的key存在,则返回true,反之,则返回false
map.get(key) 得到指定的key
map.set(key,value)   设置key
map.remove(key)   删除 
map.keys() 以数组的形式返回该map所有的key
map.values()   以数组的形式返回该map的所有的value
map.entries() 以数组形式返回该map的所有的key和value
map.forEach(function()) 遍历
map.empty() 映射为空,返回true;否则,返回false
map.size()  返回映射的大小
 
21、集合  
 
d3.set([array]) 使用数组来构建集合
set.has(value)  如果集合中有指定的元素,则返回true 没有返回fasle
set.add(value) 添加
set.remove(value)移除
set.values() 返回集合中所有元素
set.forEach(function) 遍历
set.empty()   集合为空,则返回true
set.size() 返回大小
 
22、嵌套结构Nest
d3.nest()   建一个新的嵌套结构
nest.key指定嵌套结构的键
nest.sortKeys(comparator) 对嵌套结构进行排序
nest.sortValues(comparators)对照值嵌套结构进行排序
nest.rollup(function())对每一组叶子节点调用function
nest.map()  以映射的形式输出数组
 

以上是关于精通D3.js学习笔记基础的函数的主要内容,如果未能解决你的问题,请参考以下文章

d3.js学习笔记

d3.js学习笔记

d3.js学习笔记—— Transition

d3.js学习笔记—— Transition

d3.js学习笔记

d3.js学习笔记