d3
D3介绍
D3是用来做web页面可视化的组件，其官方网址为http://d3js.org
安装
D3类库的文件只有一个d3.js。下载后直接在html的<script>标签中引用此js就可以了。
最好安装一个web服务器，例如apache HTTP server, nginx等等。
绘制SVG
一般D3实在SVG上进行作图的。虽然可以在Canvas上作图，但D3提供了大量SVG图形的生成器，也就是说D3更面向SVG开发。例如：
var svg = d3.select("body").APPend("svg").attr("width", 200).attr("height", 200);
svg.append("circle").attr("cx", "50px").attr("cy", "50px").attr("r", "50px").attr("fill", "green");
选择集(selection)
d3.select和d3.selectAll返回的对象被称为选择集。
选择集的产生如下：
var p = d3.selectAll("p");
上面是选择了所有的p标签。如果只想选择一个可以使用d3.select()方法。
选择集产生后就可以调用选择集的一些方法，其方法有如下功能：
查看状态函数
empty() 判断选择集是否为空
node() 返回第一个非空元素, 如果选择集为空，则返回null.
size() 返回选择集元素个数。
获取或设定值
attr(name[,value]) 设置或返回选择集的属性, name参数为属性名称，value为属性值。如果省略value，则返回当前值；如果给定了value，则将name的值设置为value。
classed(name[,value]) 设定或获取选择集的CSS类。name是类名，value是一个布尔值。布尔值表示该类是否开启。name中可以包含多个类（使用逗号分隔）。
style(name[, value[, priority]]) 设定或获取选择集的样式。name为样式名，value为样式值。
property(name[,value]) 设定或获取选择集的属性。有部分属性不能使用attr()函数，例如输入框的value属性，需要使用property()函数。
text([value]) 获取或设定选择集中的文本内容。
html([value]) 获取或设定选择集中的内部HTML内容。类似于DOM的innerHTML，包括内部的标签。
添加，插入或者删除
append(name) 在选择集末尾添加一个元素。例如: body.append("p").text("hello")
insert(name[, before]) 在选择集指定元素之前插入一个元素。before是CSS选择器名称。例如：body.insert("p", "#id").text("hello")。
remove() 删除选择集中的元素。
绑定数据
datum([value]) 选择集中每一个元素都绑定相同数据。
data([values[, key]]) 选择集中的每一个元素分别绑定values中的每一项。key是一个键函数，用于指定绑定数组时的对应规则。
绑定数据实际上在每个元素里面增加一个__data__元素，其内容为你给定的值。
例子：
var p = d3.select("body").selectAll("p");
p.datum(7);
console.log(p);
注意：在被绑定数据的元素后面添加新元素后，新元素还会继承绑定数据。
var dataset = [1, 2, 3];
var p = d3.select("body").selectAll("p");
var update = p.data(dataset)
console.log(update)
绑定顺序
当使用data进行绑定时，默认采用升序，第0元素绑定数组中第0项，第1元素绑定数组中第1项，依次类推。如果想使用不同的顺序绑定，那么就会用到data()第二个参数键函数。
persons = [{id: 2, name: "kris"}, {id: 1, name: "zhang"}]
p.data(persons, function(d) { return d.id; })
.text(function(d) {
return d.id + ": " + d.name;
});
选择集处理
当数组长度和元素数量不一致时，就有enter部分，exit部分，update部分。
var dataset = [1, 2, 3];
var p = d3.select("body").selectAll("p");
var update = p.data(dataset);
// update部分直接修改
update.text( function(d) { return d;} );
var enter = update.enter()
// enter部分为增加的数据，添加对应的元素
enter.append("p").text(
function(d) { return d; };
);
// exit部分就是删除元素
var exit = update.exit()
exit.remove();
过滤器
有时候需要根据被绑定的数据对选择集中的元素进行过滤，使用filter()函数。
var p = d3.select("body").selectAll("p");
p.filter(function(d, i) {
if (d > 10) {
return true;
}
});
选择集排序
根据被绑定数据对选择集中的元素进行排序，使用sort()函数。
var p = d3.select("body").selectAll("p");
p.sort(function(a, b) {
return a - b;
});
选择集遍历
对选择集中每个元素分别处理，使用each()函数。
var p = d3.select("body").selectAll("p");
p.data(dataset)
.each(function(d, i) {
d.name = "kris";
})
.text(function(d, i) {
return d.id + ": " + d.name;
});
call函数
call()函数用来把选择集作为参数传递给某个函数。拖拽、缩放元素等操作会用到call()。
d3.selectAll("p").call(myFun);
function myFun(selection) {
selection.attr("name", "kris");
}
数组处理
D3提供了很多针对数组的操作函数。
排序
d3.ascending(a, b) 递增函数
d3.descending(a, b) 递减函数
求值
d3.min(array[, accessor]) 返回最小值。accessor是一个函数，指定之后数组各项会先调用accessor。
d3.max(array[, accessor]) 返回最大值
d3.extent(array[, accessor]) 返回一个列表，其中包括最小和最大值
d3.sum(array[, accessor]) 返回数组总和。如果数组为空，则返回0.
d3.mean(array[, accessor]) 返回数组平均值，如果数组为空，则返回undefined
d3.median(array[a, accessor]) 返回数组中间值，如果数组为空，则返回undefined
d3.quantile(numbers, p) 求取p分位点的值。p的范围为[0, 1]。数组需要先递增排序。
d3.variance(array[, accessor]) 求方差
d3.deviation(array[, accessor]) 求标准差
d3.bisectLeft() 获取一个数组项左边的位置。
d3.bisect() 获取一个数组项右边的位置。
d3.bisectRight() 和bisect()一样。
操作数组
d3.shuffle(array[, lo[, hi]]) 随机排列数组内容
d3.merge(arrays) 合并两个数组（参数是一个大数组，包含要合并两个数组）
d3.pairs(array) 返回一个数组，其包含两个相邻的数组成的数组。
d3.range([start, ] stop [, step]) 返回等差数列。start默认值为0，step默认值为1.
d3.permute(array, indexes) 根据指定的索引号数组返回排列后的数组。
d3.zip(array, …) 制作数组的数组。
d3.transpose(matrix) 求转置矩阵。
映射（Map）
d3.map([object][, key]) 建立一个映射。第一个参数为数组，第二个参数指定映射的key。
map.has(key) 判断是否key存在于map中
map.get(key) 获取key对应的value，不存在返回undefined
map.set(key, value) 设定key对应的value
map.remove(key) 删除key和value
map.keys() 返回所有的key（数组）
map.values() 返回所有value（数组）
map.entries() 返回key和value的数组
map.foreach(function) 分别对map中的每一项调用function函数。function函数有2个参数：key, value。
map.empty() 是否为空
map.size() 返回元素个数
集合(Set)
d3.set([array]) 建立一个集合。如果数组给定，则使用数组中的值，但不会使用重复元素。
set.has(value) 是否存在value
set.add(value) 增加value
set.remove(value) 删除value
set.values() 返回所有内容
set.forEach(function) 对每一个元素调用function。function参数为value。
set.empty() 是否为空
set.size() 返回大小
嵌套结构(Nest)
嵌套结构用来对数组中的对象进行分类，一层套一层，让索引更加方便。就是把一组元素以树状结构组织起来。
- d3.nest() 创建一个空的nest对象。
- nest.key(function) 指定nest的key
- nest.entries(array) 指定数组array将放入nest中作为数据，同时把上一步的key()函数指定键作为key。
- nest.sortKeys(comparator) 对nest的数据进行排序，在key()方法后调用. 参数为d3.descending或ascending
- nest.sortValues(comparator) 根据值进行排序
- nest.rollup(function) 对每一组叶子节点调用指定的函数function。参数为values，当前叶子节点的数组。
- nest.map(array[, mapType]) 已映射的形式输出数组。
转载自：https://blog.csdn.net/kriszhang/article/details/70174410
文章最后发布于: 2019-01-04 11:23:13
相关阅读
概览体验环境：软件版本：3.2.44设备型号：HUAWEI G750-T01操作系统：4.2.2体验时间：2015年8月16日体验人员：龙潇官方应用介绍360手机助手，您
64位windows10，打不chm文件问题，终于解决了。。。
公司新给配了一台win10笔记本，发现打不开chm文件，度娘给的方案都是修改文件属性解除锁定之类的，根本解决不了问题。经过几天研究，发现
GTX1060 6G/5G/3G区别对比 老黄这刀法也没谁了
GTX 1060可以说是10系列显卡中最让人无语的一个系列，也是唯一一个有三个版本型号的10系列，估计也只有NV这种大佬才敢这样肆意的放纵
Microsoft Office 2016 四合一绿色精简版32/64位
点击下载出处：Microsoft Office 2016 四合一绿色精简版电脑必备软件之一，office系列，永远是你电脑不可缺少的一款软件。作为微软家的
打印机系那个药打印6寸的照片，但是竖着放不进纸或夹纸，横着放可以正常进纸打印，但是没有横着放的纸张尺寸设置，该怎么自己设置6寸的纸