精通D3.js学习笔记（1）基础的函数
2016-06-14 18:17
316 查看
买了本吕大师的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)
[align=left] <body>[/align]
[align=left] < p>Cat</p >[/align]
[align=left] < p id= "plane">plane</p >[/align]
[align=left] < p>Ship</p >[/align]
[align=left] </ body>[/align]
[align=left] < script>[/align]
[align=left] var body = d3.select( "body");[/align]
[align=left] body.append( "p").text ("Train");[/align]
[align=left] body.insert( "p","#plane" ).text( "Bike");[/align]
[align=left] plane.remove();[/align]
[align=left] </script>[/align]
[align=left] [/align]
[align=left]6、datum 数据绑定 对于选择集中的每一个元素，都加一个_data_属性。[/align]
[align=left] [/align]
[align=left]var p = d3.select("body").selectAll("p");[/align]
[align=left]p.datum("string")[/align]
[align=left] .text(function(d,i){[/align]
[align=left] return d + " " + i; //d是datum数据 i 是index索引 [/align]
[align=left] });[/align]
[align=left]7、data()能将数组各项分分别绑定到选择集的个元素上。并且能指定绑定的规则。[/align]
[align=left] 绑定的顺序：指定一个id值。persins = [{id：6,name:"张三"}，{id:9 , name:"李四"} , {id : 3 , name:"王五"}];[/align]
[align=left]p.data(persons,function(d){return d.id;}).text(function(d){return d.id + " : " + d.name});[/align]
[align=left] [/align]
[align=left]显示：<p>3:王五</p> <p>6：张三</p> <p>9：李四</p>[/align]
[align=left] [/align]
[align=left] [/align]
[align=left]8、选择集的处理[/align]
[align=left]处理模板[/align]
[align=left]var dataset = [10,20,30];[/align]
[align=left]var p = d3.select("body").selelctAll("p");[/align]
[align=left]var update = p.data(dataset);[/align]
[align=left]var enter = update.enter();[/align]
[align=left]var exit = update.exit();[/align]
[align=left] [/align]
[align=left]update.text(function(d){return d;});[/align]
[align=left] [/align]
[align=left]enter.append("p").text(function(d){return d;})[/align]
[align=left] [/align]
[align=left]exit.remove();[/align]
[align=left] [/align]
[align=left] [/align]
[align=left]9、过滤器filter[/align]
[align=left] [/align]
[align=left]selection.filter(function(d,i){[/align]
[align=left] if(d>20)[/align]
[align=left] rutrun true;[/align]
[align=left] else[/align]
[align=left] return false;[/align]
[align=left]})；[/align]
[align=left] [/align]
[align=left]10、sort（）排序[/align]
[align=left] [/align]
[align=left]selection.sort(function(a,b){[/align]
[align=left] return b-a;[/align]
[align=left]});[/align]
[align=left] [/align]
[align=left]11、each()遍历[/align]
[align=left]p.data(persons).each(function(d,i){d.age = 20;}).text(function(d,i){return d.id + "" + d.name + "" + d.age;})[/align]
[align=left] [/align]
[align=left]在每一项的添加age [/align]
[align=left] [/align]
[align=left]12、call（） 允许将选择集自身作为参数，传递给某一个函数[/align]
[align=left]d3.selectAll("div").call(myfun) ==== function myfun(selection) {} myfun(d3.selectiAll("div"));[/align]
[align=left] [/align]
[align=left] [/align]
[align=left]12、数组的处理[/align]
[align=left]排序[/align]
[align=left]// var number = [54,23,77,11,34];[/align]
[align=left] var number = new Array(54, 23,77 ,11, 34);[/align]
[align=left]// number.sort(d3.ascending); //递增函数[/align]
[align=left]// number.sort(d3.descending) //递减函数[/align]
[align=left]// number.sort(function(a,b){ //递增函数[/align]
[align=left]// return a-b;[/align]
[align=left]// })[/align]
[align=left]// number.sort(function(a,b){ //递减函数[/align]
[align=left]// return a-b;[/align]
[align=left]// })[/align]
[align=left]13、min max extent [/align]
[align=left]var minAcc = d3.min(number, function(d ){return d *3});[/align]
[align=left] var maxAcc = d3.max(number, function(d ){return d -5});[/align]
[align=left] var extentAcc = d3.extent(number, function(d ){return d %7});[/align]
[align=left] console.log(minAcc,maxAcc,extentAcc)[/align]
[align=left] var numbers = [69, 11,undefined ,53, 27,82 ,34, NaN];[/align]
[align=left]sum 求和 mean 平均数 [/align]
[align=left] var sum = d3.sum(numbers,function( d){return d/3 });[/align]
[align=left] var mean = d3.mean(numbers);[/align]
[align=left] console.log(sum,mean)[/align]
[align=left] [/align]
[align=left]14、median 求出数组的中间值，如果数组是空，则返回undefined[/align]
[align=left] [/align]
[align=left]d3.quantile(numbers,p)[/align]
[align=left]取出p分位点的值，p的范围为[0,1]需先排序[/align]
[align=left] [/align]
[align=left]var numbers = [3, 1,10 ];[/align]
[align=left]console.log(d3.quantile(numbers.sort(d3.ascending),0.5)) ;//3[/align]
[align=left]15、d3.variance 方差[/align]
[align=left] d3.deviation 标准差[/align]
[align=left] [/align]
[align=left]16、d3.bisectLeft() 获取某数组项左边的位置[/align]
[align=left] d3.bisect() 获取某数组项右边的位置[/align]
[align=left] d3.bisectRight() 和bisect()一样 可以配合splice() 使用[/align]
[align=left] var numbers = [10, 13,16 ,19, 22,25 ];[/align]
[align=left] var iLeft = d3.bisectLeft(numbers.sort(d3.ascending), 16);[/align]
[align=left] numbers.splice(iLeft, 0,77 );//在16的前面加上一个77[/align]
[align=left] numbers.splice(iLeft, 1); //删除一项[/align]
[align=left]17、d3.shuffle 随机排序数组[/align]
[align=left] d3.merge(arrays) 合并两个数组[/align]
[align=left] d3.pairs(array) 返回邻接的数组对 [/align]
[align=left] var numbers = [10, 13,16 ,19, 22,25 ];[/align]
[align=left] var pairs = d3.pairs(numbers);[/align]
[align=left] console.log(pairs); [10,13][16,19],...[/align]
[align=left] [/align]
[align=left]18、d3.range([start,]stop[,step]);返回等差数列[/align]
[align=left]var a = d3.range( 10);[/align]
[align=left]console.log(a) //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9][/align]
[align=left] [/align]
[align=left]var b = d3.range( 2,10 );[/align]
[align=left]console.log(b);//[2, 3, 4, 5, 6, 7, 8, 9][/align]
[align=left] [/align]
[align=left]var c = d3.range( 2,10 ,2);[/align]
[align=left]console.log(c);//[2, 4, 6, 8][/align]
[align=left] [/align]
19、d3.permute(array,indexes):根据指定的索引号数组返回排序后的数组
[align=left]var ani = ["cat" , "bog" , "bird"];[/align]
[align=left]var newani = d3.permute(ani,[1, 0,2 ]);[/align]
[align=left]console.log(newani);//["bog", "cat", "bird"][/align]
[align=left] [/align]
[align=left]d3.zip(arrays):用多个数组来制作数组的数组[/align]
[align=left] [/align]
[align=left]//求两个数组的内积[/align]
[align=left]var a = [10, 20,5 ];[/align]
[align=left]var b = [-5 ,10, 3];[/align]
[align=left]var ab = d3.sum(d3.zip(a,b) , function( d){return d[0] *d[1 ]});[/align]
[align=left]console.log(ab)//165 [[10,-5] , [20,10] , [5,3]] [-50,200,15] [/align]
[align=left]d3.transpose(matrix):求转换矩阵[/align]
[align=left]var a = [[1, 2,3 ] , [4, 5,6 ] ][/align]
[align=left]var t = d3.transpose(a);[/align]
[align=left]console.log(t); [[1,4],[2,5],[3,6]][/align]
[align=left] [/align]
[align=left]20、映射（）map[/align]
[align=left]d3.map([object],[key]) :构造映射。第一个参数是源数组，[/align]
[align=left]d3.map([object][,key]) 构造映射，第一个参数是数据源，第二个参数用于指定映射的key[/align]
[align=left]d3.has(key) 指定的key存在，则返回true，反之，则返回false[/align]
[align=left]map.get(key) 得到指定的key[/align]
[align=left]map.set(key,value) 设置key[/align]
[align=left]map.remove(key) 删除 [/align]
[align=left]map.keys() 以数组的形式返回该map所有的key[/align]
[align=left]map.values() 以数组的形式返回该map的所有的value[/align]
[align=left]map.entries() 以数组形式返回该map的所有的key和value[/align]
[align=left]map.forEach(function()) 遍历[/align]
[align=left]map.empty() 映射为空，返回true；否则，返回false[/align]
[align=left]map.size() 返回映射的大小[/align]
[align=left] [/align]
[align=left]21、集合 [/align]
[align=left] [/align]
[align=left]d3.set([array]) 使用数组来构建集合[/align]
[align=left]set.has(value) 如果集合中有指定的元素，则返回true 没有返回fasle[/align]
[align=left]set.add(value) 添加[/align]
[align=left]set.remove(value)移除[/align]
[align=left]set.values() 返回集合中所有元素[/align]
[align=left]set.forEach(function) 遍历[/align]
[align=left]set.empty() 集合为空，则返回true[/align]
[align=left]set.size() 返回大小[/align]
[align=left] [/align]
[align=left]22、嵌套结构Nest[/align]
[align=left]d3.nest() 建一个新的嵌套结构[/align]
[align=left]nest.key指定嵌套结构的键[/align]
[align=left]nest.sortKeys(comparator) 对嵌套结构进行排序[/align]
[align=left]nest.sortValues(comparators)对照值嵌套结构进行排序[/align]
[align=left]nest.rollup(function())对每一组叶子节点调用function[/align]
[align=left]nest.map() 以映射的形式输出数组[/align]
[align=left] [/align]
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)
[align=left] <body>[/align]
[align=left] < p>Cat</p >[/align]
[align=left] < p id= "plane">plane</p >[/align]
[align=left] < p>Ship</p >[/align]
[align=left] </ body>[/align]
[align=left] < script>[/align]
[align=left] var body = d3.select( "body");[/align]
[align=left] body.append( "p").text ("Train");[/align]
[align=left] body.insert( "p","#plane" ).text( "Bike");[/align]
[align=left] plane.remove();[/align]
[align=left] </script>[/align]
[align=left] [/align]
[align=left]6、datum 数据绑定 对于选择集中的每一个元素，都加一个_data_属性。[/align]
[align=left] [/align]
[align=left]var p = d3.select("body").selectAll("p");[/align]
[align=left]p.datum("string")[/align]
[align=left] .text(function(d,i){[/align]
[align=left] return d + " " + i; //d是datum数据 i 是index索引 [/align]
[align=left] });[/align]
[align=left]7、data()能将数组各项分分别绑定到选择集的个元素上。并且能指定绑定的规则。[/align]
[align=left] 绑定的顺序：指定一个id值。persins = [{id：6,name:"张三"}，{id:9 , name:"李四"} , {id : 3 , name:"王五"}];[/align]
[align=left]p.data(persons,function(d){return d.id;}).text(function(d){return d.id + " : " + d.name});[/align]
[align=left] [/align]
[align=left]显示：<p>3:王五</p> <p>6：张三</p> <p>9：李四</p>[/align]
[align=left] [/align]
[align=left] [/align]
[align=left]8、选择集的处理[/align]
[align=left]处理模板[/align]
[align=left]var dataset = [10,20,30];[/align]
[align=left]var p = d3.select("body").selelctAll("p");[/align]
[align=left]var update = p.data(dataset);[/align]
[align=left]var enter = update.enter();[/align]
[align=left]var exit = update.exit();[/align]
[align=left] [/align]
[align=left]update.text(function(d){return d;});[/align]
[align=left] [/align]
[align=left]enter.append("p").text(function(d){return d;})[/align]
[align=left] [/align]
[align=left]exit.remove();[/align]
[align=left] [/align]
[align=left] [/align]
[align=left]9、过滤器filter[/align]
[align=left] [/align]
[align=left]selection.filter(function(d,i){[/align]
[align=left] if(d>20)[/align]
[align=left] rutrun true;[/align]
[align=left] else[/align]
[align=left] return false;[/align]
[align=left]})；[/align]
[align=left] [/align]
[align=left]10、sort（）排序[/align]
[align=left] [/align]
[align=left]selection.sort(function(a,b){[/align]
[align=left] return b-a;[/align]
[align=left]});[/align]
[align=left] [/align]
[align=left]11、each()遍历[/align]
[align=left]p.data(persons).each(function(d,i){d.age = 20;}).text(function(d,i){return d.id + "" + d.name + "" + d.age;})[/align]
[align=left] [/align]
[align=left]在每一项的添加age [/align]
[align=left] [/align]
[align=left]12、call（） 允许将选择集自身作为参数，传递给某一个函数[/align]
[align=left]d3.selectAll("div").call(myfun) ==== function myfun(selection) {} myfun(d3.selectiAll("div"));[/align]
[align=left] [/align]
[align=left] [/align]
[align=left]12、数组的处理[/align]
[align=left]排序[/align]
[align=left]// var number = [54,23,77,11,34];[/align]
[align=left] var number = new Array(54, 23,77 ,11, 34);[/align]
[align=left]// number.sort(d3.ascending); //递增函数[/align]
[align=left]// number.sort(d3.descending) //递减函数[/align]
[align=left]// number.sort(function(a,b){ //递增函数[/align]
[align=left]// return a-b;[/align]
[align=left]// })[/align]
[align=left]// number.sort(function(a,b){ //递减函数[/align]
[align=left]// return a-b;[/align]
[align=left]// })[/align]
[align=left]13、min max extent [/align]
[align=left]var minAcc = d3.min(number, function(d ){return d *3});[/align]
[align=left] var maxAcc = d3.max(number, function(d ){return d -5});[/align]
[align=left] var extentAcc = d3.extent(number, function(d ){return d %7});[/align]
[align=left] console.log(minAcc,maxAcc,extentAcc)[/align]
[align=left] var numbers = [69, 11,undefined ,53, 27,82 ,34, NaN];[/align]
[align=left]sum 求和 mean 平均数 [/align]
[align=left] var sum = d3.sum(numbers,function( d){return d/3 });[/align]
[align=left] var mean = d3.mean(numbers);[/align]
[align=left] console.log(sum,mean)[/align]
[align=left] [/align]
[align=left]14、median 求出数组的中间值，如果数组是空，则返回undefined[/align]
[align=left] [/align]
[align=left]d3.quantile(numbers,p)[/align]
[align=left]取出p分位点的值，p的范围为[0,1]需先排序[/align]
[align=left] [/align]
[align=left]var numbers = [3, 1,10 ];[/align]
[align=left]console.log(d3.quantile(numbers.sort(d3.ascending),0.5)) ;//3[/align]
[align=left]15、d3.variance 方差[/align]
[align=left] d3.deviation 标准差[/align]
[align=left] [/align]
[align=left]16、d3.bisectLeft() 获取某数组项左边的位置[/align]
[align=left] d3.bisect() 获取某数组项右边的位置[/align]
[align=left] d3.bisectRight() 和bisect()一样 可以配合splice() 使用[/align]
[align=left] var numbers = [10, 13,16 ,19, 22,25 ];[/align]
[align=left] var iLeft = d3.bisectLeft(numbers.sort(d3.ascending), 16);[/align]
[align=left] numbers.splice(iLeft, 0,77 );//在16的前面加上一个77[/align]
[align=left] numbers.splice(iLeft, 1); //删除一项[/align]
[align=left]17、d3.shuffle 随机排序数组[/align]
[align=left] d3.merge(arrays) 合并两个数组[/align]
[align=left] d3.pairs(array) 返回邻接的数组对 [/align]
[align=left] var numbers = [10, 13,16 ,19, 22,25 ];[/align]
[align=left] var pairs = d3.pairs(numbers);[/align]
[align=left] console.log(pairs); [10,13][16,19],...[/align]
[align=left] [/align]
[align=left]18、d3.range([start,]stop[,step]);返回等差数列[/align]
[align=left]var a = d3.range( 10);[/align]
[align=left]console.log(a) //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9][/align]
[align=left] [/align]
[align=left]var b = d3.range( 2,10 );[/align]
[align=left]console.log(b);//[2, 3, 4, 5, 6, 7, 8, 9][/align]
[align=left] [/align]
[align=left]var c = d3.range( 2,10 ,2);[/align]
[align=left]console.log(c);//[2, 4, 6, 8][/align]
[align=left] [/align]
19、d3.permute(array,indexes):根据指定的索引号数组返回排序后的数组
[align=left]var ani = ["cat" , "bog" , "bird"];[/align]
[align=left]var newani = d3.permute(ani,[1, 0,2 ]);[/align]
[align=left]console.log(newani);//["bog", "cat", "bird"][/align]
[align=left] [/align]
[align=left]d3.zip(arrays):用多个数组来制作数组的数组[/align]
[align=left] [/align]
[align=left]//求两个数组的内积[/align]
[align=left]var a = [10, 20,5 ];[/align]
[align=left]var b = [-5 ,10, 3];[/align]
[align=left]var ab = d3.sum(d3.zip(a,b) , function( d){return d[0] *d[1 ]});[/align]
[align=left]console.log(ab)//165 [[10,-5] , [20,10] , [5,3]] [-50,200,15] [/align]
[align=left]d3.transpose(matrix):求转换矩阵[/align]
[align=left]var a = [[1, 2,3 ] , [4, 5,6 ] ][/align]
[align=left]var t = d3.transpose(a);[/align]
[align=left]console.log(t); [[1,4],[2,5],[3,6]][/align]
[align=left] [/align]
[align=left]20、映射（）map[/align]
[align=left]d3.map([object],[key]) :构造映射。第一个参数是源数组，[/align]
[align=left]d3.map([object][,key]) 构造映射，第一个参数是数据源，第二个参数用于指定映射的key[/align]
[align=left]d3.has(key) 指定的key存在，则返回true，反之，则返回false[/align]
[align=left]map.get(key) 得到指定的key[/align]
[align=left]map.set(key,value) 设置key[/align]
[align=left]map.remove(key) 删除 [/align]
[align=left]map.keys() 以数组的形式返回该map所有的key[/align]
[align=left]map.values() 以数组的形式返回该map的所有的value[/align]
[align=left]map.entries() 以数组形式返回该map的所有的key和value[/align]
[align=left]map.forEach(function()) 遍历[/align]
[align=left]map.empty() 映射为空，返回true；否则，返回false[/align]
[align=left]map.size() 返回映射的大小[/align]
[align=left] [/align]
[align=left]21、集合 [/align]
[align=left] [/align]
[align=left]d3.set([array]) 使用数组来构建集合[/align]
[align=left]set.has(value) 如果集合中有指定的元素，则返回true 没有返回fasle[/align]
[align=left]set.add(value) 添加[/align]
[align=left]set.remove(value)移除[/align]
[align=left]set.values() 返回集合中所有元素[/align]
[align=left]set.forEach(function) 遍历[/align]
[align=left]set.empty() 集合为空，则返回true[/align]
[align=left]set.size() 返回大小[/align]
[align=left] [/align]
[align=left]22、嵌套结构Nest[/align]
[align=left]d3.nest() 建一个新的嵌套结构[/align]
[align=left]nest.key指定嵌套结构的键[/align]
[align=left]nest.sortKeys(comparator) 对嵌套结构进行排序[/align]
[align=left]nest.sortValues(comparators)对照值嵌套结构进行排序[/align]
[align=left]nest.rollup(function())对每一组叶子节点调用function[/align]
[align=left]nest.map() 以映射的形式输出数组[/align]
[align=left] [/align]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript 操作 url 中 search 部分方法函数
- Js判断出生年月填写的 是否正确
- Javascript中Array.prototype.map()详解
- JavaScript对数据表格的增删改查操作详解
- JS通过身份证号码获取出生年月日
- 使用SeaJS实现模块化JavaScript开发
- 原生js封装ajax 案例
- javascript闭包
- D3.js学习02_数据绑定data
- 各个JSON技术的比较
- js得到时间戳(10位数)
- 使用SeaJS实现模块化JavaScript开发
- JavaScript笔记整理——递归
- JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值
- JS设计模式之代理模式
- Js实现Base64编码、解码
- JS 对数组元素排序
- javascript计算前1!+2!+...+n!的阶乘和
- js 时间格式化
- Jersey Restful WebService 接收 JSON 数组 对象