D3介绍

最新推荐文章于 2024-08-23 09:16:42 发布

kriszhang

最新推荐文章于 2024-08-23 09:16:42 发布

阅读量3.4k

点赞数 5

分类专栏： d3-js 文章标签： d3

本文链接：https://blog.csdn.net/kriszhang/article/details/70174410

版权

d3-js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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;
    }
    return false;
});

选择集排序

根据被绑定数据对选择集中的元素进行排序，使用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("div").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]) 已映射的形式输出数组。

@待续