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

买了本吕大师的d3可视化。最近来学习一下，作个笔记。

 

1.选择元素  select（第一元素） 和selectAll（所有的元素）

     相似css的选择器。也能够是dom选中的。 var impotant = document.getElementById("important"); d3.select(important);

     getElementById  使用select    getElementsByClassName  使用selectAll

二、选择集

     d3.select  and d3.selectAll 返回的对象是选择集

三、状态函数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

四、属性函数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  同样

 

 五、添加、删除、插入

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 >

 

六、datum 数据绑定 对于选择集中的每个元素，都加一个_data_属性。

 

var p = d3.select("body").selectAll("p");

p.datum("string")

     .text(function(d,i){

          return d + " " + i;   //d是datum数据  i 是index索引 

     });

七、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>

 

 

八、选择集的处理

处理模板

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();

 

 

九、过滤器filter

 

selection.filter(function(d,i){

     if(d>20)

          rutrun true;

     else

          return false;

})；

 

十、sort（）排序

 

selection.sort(function(a,b){

     return b-a;

});

 

十一、each()遍历

p.data(persons).each(function(d,i){d.age = 20;}).text(function(d,i){return d.id + "" + d.name + "" + d.age;})

 

在每一项的添加age  

 

十二、call（） 容许将选择集自身做为参数，传递给某一个函数

d3.selectAll("div").call(myfun)   ====    function myfun(selection) {}  myfun(d3.selectiAll("div"));

 

 

十二、数组的处理

排序

//         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;

//   })

1三、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)

 

1四、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

1五、d3.variance  方差

   d3.deviation      标准差

 

1六、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 );  //删除一项

1七、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],...

 

1八、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]

 

1九、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()  返回映射的大小

 

2一、集合  

 

d3.set([array]) 使用数组来构建集合

set.has(value)  若是集合中有指定的元素，则返回true 没有返回fasle

set.add(value) 添加

set.remove(value)移除

set.values() 返回集合中全部元素

set.forEach(function) 遍历

set.empty()   集合为空，则返回true

set.size() 返回大小

 

2二、嵌套结构Nest

d3.nest()   建一个新的嵌套结构

nest.key指定嵌套结构的键

nest.sortKeys(comparator) 对嵌套结构进行排序

nest.sortValues(comparators)对照值嵌套结构进行排序

nest.rollup(function())对每一组叶子节点调用function

nest.map()  以映射的形式输出数组