D3入门篇 01 | 选择集及数据处理
D3入门篇 01 | 选择集及数据处理
文章目录
选择器
选择元素
函数 | 返回值 |
|---|---|
select() | 匹配的第一个元素 |
selectAll() | 匹配的所有元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>D3</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
<script src="js/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/d3/d3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<h1>D3 选择器</h1>
<div id="success" class="alert alert-success" role="alert">
Well done!
</div>
<div id="info" class="alert alert-info" role="alert">
Heads up!
</div>
<div id="warning" class="alert alert-warning" role="alert">
Warning!
</div>
<div id="danger" class="alert alert-danger" role="alert">
Oh snap!
</div>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
</div>
</body>
<script type="text/javascript">
//-----select------
body = d3.select("body");
success = d3.select("#success");
alert = d3.select(".alert");
//-----selectAll------
divs = d3.selectAll("div");
alerts = d3.selectAll(".alert");
lis = d3.selectAll("ul li")
//-----连缀语法------
divs2 = d3.select("body").selectAll("div");
console.log(body);
console.log(success);
console.log(alert);
console.log(divs);
console.log(alerts);
console.log(lis);
console.log(divs2);
console.log(alerts.empty())
</script>
</html>选择集属性
选择器返回结果即为选择集
函数 | 返回值 |
|---|---|
selection.empty() | 选择集为空，返回Ture，反之亦然 |
selection.node() | 选中集非空，返回第一个非空元素，选择集为空，返回null |
selection.size() | 选中集的元素个数 |
选择集操作
函数 | 参数 | 返回值 |
|---|---|---|
selection.attr(name,value) | name：属性名value：属性值 | value为空时，返回当前属性值Value非空是，设置name属性改为value值 |
selection.classed(name,value)selection.classed{“name1”：true，“name2”，false}) | name：类名value：布尔值 | value为空时，返回当前类的布尔值Value非空是，设置name类名改为value值 |
selection.style(name,value) | name：样式名value：样式值 | value为空时，返回当前样式值Value非空是，设置name样式名改为value值 |
selection.property(name,value) | name：属性名value：属性值 | value为空时，返回当前属性值Value非空是，设置name属性改为value值 |
selection.text() | 文本内容，不包含其他元素标签 | |
selection.html() | 包括元素内部标签 | |
selection.append(name) | name：元素名 | 在选择集末尾添加元素 |
selection.insert(name，before) | name：元素名before：选择器名称 | 在选择集指定元素前插入元素 |
selection.remove() | 删除选择集选中元素 | |
selection.filter(func) | func：函数 | 根据func函数条件获取选择集的子集 |
selection.each(func) | func：函数 | 在func函数里对选择集的各个元素进行处理 |
selection.call(func) | func：函数 | 将选择集自身传递给func函数 |
selection.sort(func) | func：函数 | 根据func函数规则来排序 |
attr() 不能应用到文本框，复选框等一部分组件中，需要用property来获取值和设置值 设置文本空的值 d3.select("#email").property(“value”,"1234@163.com")
数据绑定
函数 | 参数 | 返回值 |
|---|---|---|
selection**.datum**(value) | value：数据值 | 选择集中每个元素都绑定相同的数据value |
selection.data(values,key) | values：数组key：键函数 | 选择集中每个元素都分别绑定数组valueskey非空时，以key定义规则绑定数据 |
update = selection.data(dataset)
函数 | 返回值 |
|---|---|
update.enter() | 元素少于数据，需要让元素多“enter”几个，以此让所有数据都可以绑定到元素 |
update.exit() | 元素多于数据，需要让元素多“exit”几个，因为没有多余的数据来让元素绑定 |
通用处理模板： var dataset = [1, 2, 3]; var p = d3.select(“body”).selectAll(“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; } );
数据处理
数组
dataset = [1, 2, 3, 4, 5, 6]
函数 | 返回值 |
|---|---|
dataset.sort( d3.ascending ) | 递增排序，直接修改数组 |
dataset.sort( d3.descending ) | 递减排序，直接修改数组 |
d3.shuffle( dataset ) | 随机排列，直接修改数组 |
d3.permute(dataset, indexs) | 根据indexs来排序数组 |
d3.pairs( dataset ) | 返回 i 项和 i-1 项组成的对的数组 |
d3.range( start, stop, step ) | 等差数列 |
d3.merge( dataset1, dataset2 ) | 两个数组合并为一个 |
d3.zip( dataset1, dataset2, … ) | 多个数组构成二维数组( 矩阵 ) |
d3.transpose( matrix ) | 转置矩阵 |
映射
函数 | 返回值 |
|---|---|
d3.map( dataset ,key ) | 构造映射 |
d3.has(key) | key 非空，返回 true |
map.get(key) | key 非空，返回 value |
map.set(key, value) | 设置 key 为 value |
map.remove(key) | key 非空，删除后，返回 true |
map.keys() | 返回所有 key |
map.values() | 返回所有 value |
map.entries() | 返回所有 key，value |
map.forEach(function(k,v){}) | 对映射中的每一项调用function函数 |
map.empty() | map非空，返回 true |
map.size() | 映射大小 |
统计
函数 | 返回值 |
|---|---|
d3.min( dataset, accessor ) | 最小值 |
d3.max( dataset, accessor ) | 最大值 |
d3.extent( dataset, accessor ) | 最小值和最大值 |
d3.sum( dataset, accessor ) | 总和 |
d3.mean( dataset, accessor ) | 平均值 |
d3.median( dataset, accessor ) | 数据集的中位数 |
d3.quantile( dataset, p) | p分之位数，p=0.25就是上四分位数 |
d3.variance( dataset, accessor ) | 方差 |
d3.deviation( dataset, accessor ) | 标准差 |
Accessor:数据访问器 min = d3.min( dataset, function(d) { return d*3 });
在所有的统计函数中,是将undefined和NaN去掉后,再计算返回值
腾讯云开发者
