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

时间：2022-09-08 13:39:41
买了本吕大师的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];
);
//   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 
});
});
});
      console.log(minAcc,maxAcc,extentAcc)
, NaN];
sum 求和 mean 平均数     
});
      var mean = d3.mean(numbers);
      console.log(sum,mean)
 
14、median   求出数组的中间值，如果数组是空，则返回undefined
 
d3.quantile(numbers,p)
取出p分位点的值，p的范围为[0,1]需先排序
 
];
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() 使用
];
);
);//在16的前面加上一个77
);  //删除一项
17、d3.shuffle  随机排序数组
      d3.merge(arrays)  合并两个数组
      d3.pairs(array) 返回邻接的数组对   
];
   var pairs = d3.pairs(numbers);
   console.log(pairs); [10,13][16,19],...
 
18、d3.range([start,]stop[,step]);返回等差数列
);
console.log(a)  //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
);
console.log(b);//[2, 3, 4, 5, 6, 7, 8, 9]
 
);
console.log(c);//[2, 4, 6, 8]
 

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

var ani = ["cat" , "bog" , "bird"];
]);
console.log(newani);//["bog", "cat", "bird"]
 
d3.zip(arrays):用多个数组来制作数组的数组
 
//求两个数组的内积
];
];
]});
console.log(ab)//165   [[10,-5] , [20,10] , [5,3]] [-50,200,15] 
d3.transpose(matrix):求转换矩阵
] ]
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学习笔记（1）基础的函数的更多相关文章

  1. 精通D3&period;js学习笔记（2）比例尺和坐标

    1.线性比例尺 d3.scale.linear()   创建一个线性比例尺           .domain([0,500]) 定义域           .range([0,1000]) 值域 l ...

  2. D3&period;js学习笔记（六）——SVG基础图形和D3&period;js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  3. d3&period;js学习笔记（五）——将数据结构化为D3&period;js可处理的

    目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...

  4. D3&period;js学习笔记（四）—— 使用SVG坐标空间

    目标 在这一章,你将要使用D3.js基于一些数据把SVG元素添加到你想要的坐标位置上. 我们的目标就是使用下面的数据集: var spaceCircles = [30,70,110]; 并使用D3.j ...

  5. D3&period;js学习笔记（一）——DOM上的数据绑定

    开始学习D3.js,网上没有找到很满意的中文教程,但是发现了一个很好的英文教程,讲解的非常详细.从一个初始简单的HTML网页开始,逐步加入D3.js的应用,几乎是逐句讲解.学习的时候,就顺便翻译成中文 ...

  6. D3&period;js学习笔记（三）——创建基于数据的SVG元素

    目标 在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...

  7. D3&period;js学习笔记（二）——使用绑定在DOM上的数据

    简单例子 在这个例子中,你将会使用D3.js来将数据绑定到DOM元素上.然后再使用D3.js利用绑定到DOM元素上的数据来更新网页. 在上一章中,我们以下面这个页面作为开始的: <!DOCTYP ...

  8. JS学习笔记1&lowbar;基础与常识

    1.六种数据类型 5种基础的:Undefined,Null,Boolean,Number,String(其中Undefined派生自Null) 1种复杂的:Object(本质是一组无序键值对) 2.字 ...

  9. Vue&period;js学习笔记--1&period;基础HTML和JS属性的使用

    整理自官网教程 -- https://cn.vuejs.org/ 1. 在HTML文件底部引入Vue <script src="https://cdn.jsdelivr.net/npm ...

随机推荐

  1. JavaScript继承

    最佳的继承范式 寄生组合继承 我们来看一下它的实现方式: function Object(o){ var TempObject = function(){}; TempObject.prototype ...

  2. The Factory pattern

    public class Factory { public static void main(String[] args) {//Client IFruit fruit=Factorytemp.get ...

  3. session与缓存

    分布式系统开发常见问题-1. session的复制与共享 2. 分布式缓存的设计 1. session的复制与共享 在web应用中,为了应对大规模访问,必须实现应用的集群部署.要实现集群部署主要需要实 ...

  4. Flexigrid的API

    基本设定 width  table的长度(default:auto) height  table的宽度(default:200) striped   表格的线的表示(default:true) nov ...

  5. accp8&period;0转换教材第11章JAjax加护扩展理解与练习

    ①杂记:前面有原生态JavaScript实现ajax这里又多了更简单的方法实现ajax ②$.get()方法的常用参数 参数 类型 说明 url String 必选,规定发送地址 data Plain ...

  6. webpack简单修改版本号&lpar;单页面&rpar;

    写了一个js文件,可以尽量最简单的修改版本号 package.json配置: updateV.js放置位置: updateV.js: var fs = require('fs'); //文件读写 va ...

  7. LeetCode--No&period;009 Palindrome Number

    9. Palindrome Number Total Accepted: 136330 Total Submissions: 418995 Difficulty: Easy Determine whe ...

  8. Ubuntu 开机自启动SSH&plus;远程关机

    Ubuntu 开机自启动SSH+远程关机   安装SSH 如何通过ssh远程登录linux系统 开机自启动ssh sudo gedit /etc/rc.locl # 输入密码 # 添加下面命令于 ex ...

  9. Linux下ip地址查询

    [时间:2016-12] [状态:Open] [关键词:linux,ip地址,ifconfig,ip addr] 0 引用 说起来比较搞笑,我在windows下知道可以使用ipconfig命令查询本机 ...

  10. 力扣 （LeetCode）657&period; 机器人能否返回原点

    在二维平面上,有一个机器人从原点 (0, 0) 开始.给出它的移动顺序,判断这个机器人在完成移动后是否在 (0, 0) 处结束. 移动顺序由字符串表示.字符 move[i] 表示其第 i 次移动.机器 ...

相关文章