买了本吕大师的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. using gulp

    原 荐 gulp构建前端工程 半张一块 发布时间: 2016/07/27 16:22 阅读: 895 收藏: 4 点赞: 4 评论: 2 摘要 Gulp 是一个自动化工具,前端开发者可以使用它来处理常 ...

  2. override与final

    override 强调该函数是重写的父类的函数 final 指定该函数不能被重写 两者都是针对virtual 函数

  3. bzoj3192 [JLOI2013]删除物品

    用数组表示两个栈,将两个栈的栈顶并在一起,用树状数组维护一下操作即可. 代码 #include<cstdio> #include<algorithm> #include< ...

  4. 。。。Spring框架总结（一）。。。

    Spring框架已经学习了两遍了,第一遍基本上忘得差不多了,现在开始复习第二遍的,也复习的差不多了,比之前懂了很多东西,今天就写下来,记录一下我滴小成果! 首先,在Spring框架中有两个重要的概念: ...

  5. ligerui+json_002_Grid用法、属性总结

    原文更全面,地址: http://blog.csdn.net/dxnn520/article/details/8216560 // ================================== ...

  6. paper 55：图像分割代码汇总

    matlab 图像分割算法源码 1.图像反转 MATLAB程序实现如下:I=imread('xian.bmp');J=double(I);J=-J+(256-1); %图像反转线性变换H=uint8( ...

  7. 夺命雷公狗—angularjs—10—angularjs里面的内置函数

    我们没学一门语言或者框架,几乎里面都有各自的语法和内置函数,当然,强悍的angularjs也不例外,他的方法其实常用的没多少,因为很多都可以用源生jis几乎都能完成一大部分.. <!doctyp ...

  8. ASP.NET MVC(三)

    ASP.NET Routing 模块的责任是将传入的浏览器请求映射为特有的MVC controller actions. 请求 URL 当我们不使用路由的时候 请求 http://server/app ...

  9. java 网络编程（一）---基础知识和概念了解

    java 为用户提供了十分完善的网络功能: 1. 获取网络上的各种资源(URL) 2. 与服务器建立连接和通信(ServerSocket和Socket) 3. 无连接传递本地数据(DatagramSo ...

  10. 深入了解webservice_开发实战篇

    服务器端: 第一: 配置环境 创建一个Web Project,将XFire自己的包及其XFire依赖的jar包(6个jar包)全部导入到classpath下,方法是,只需将jar包粘贴在WebRoot ...