买了本吕大师的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.js学习笔记（2）比例尺和坐标

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. JS学习笔记1_基础与常识

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

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

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

随机推荐

  1. [摘录]quarts ：overview

    最近项目用了quarts 这个 任务调度器.今天开始详细的学习学习.参考链接:http://www.quartz-scheduler.org/# Quartz Enterprise Job Sched ...

  2. centos 关闭不使用的服务

    CentOS关闭服务的方法: chkconfig –level 2345 服务名称 off 服務名稱 建議 說明 acpid 停用 Advanced Configuration and Power I ...

  3. MVC权限管理系统dwpro项目分配按钮没有显示的问题

    问题如下: 修改如下: 或者(原因为这个两个地方名要一致,大小写也要注意): 效果图:

  4. u盘安装centos

    1. 下载centos系统2. 使用UltraISO制作u盘启动.制作方法:http://jingyan.baidu.com/article/a378c960630e61b329283045.html ...

  5. 4. 星际争霸之php设计模式--工厂方法模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  6. web工程常见部署方式总结

    作为一个web测试工程师,对测试所属的平台架构,项目部署情况应该是有所了解的,下面在此基础上总结下web项目在各种场景下常用的部署方式: 第一种方法: 开发常用部署方法,直接在myeclipse里部署 ...

  7. 最懂中文的H5前端框架amazeUI

    Amaze UI 是一个轻量级(所有 CSS 和 JS gzip 后 100 kB 左右)的前端框架, 基于开源社区流行前端框架编写 amazeUI的网址:http://amazeui.org/get ...

  8. SQL Server 数据查询 整理

    一.使用SELECT检索数据 数据查询是SQL语言的中心内容,SELECT 语句的作用是让数据库服务器根据客户要求检索出所需要的信息资料,并按照规定的格式进行整理,返回给客户端. SELECT 语句的 ...

  9. MySQL函数汇总

    前言 MySQL提供了众多功能强大.方便易用的函数,使用这些函数,可以极大地提高用户对于数据库的管理效率,从而更加灵活地满足不同用户的需求.本文将MySQL的函数分类并汇总,以便以后用到的时候可以随时 ...

  10. android 学习随笔十六（广播 ）

    1.广播接收者 BroadcastReceiver 接收系统发出的广播 现实中的广播:电台为了传达一些消息,而发送的广播,通过广播携带要传达的消息,群众只要买一个收音机,就可以收到广播了  Andro ...