精通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()  以映射的形式輸出數組