D3 —— 基础知识与入门 #10
Description
选择元素
// 选择一个元素
d3.select('body');
d3.select('#main');
d3.select('.list'); // 注意只能选择类为.list 的第一个
// 选择多个元素
d3.selectAll('p');
d3.selectAll('ul li');
// dom api 的方式
var dom = document.getElementById('main');
d3.select(dom);
var doms = document.querySelectorAll('ul li');
d3.selectAll(doms);
// 链式调用
d3.select(dom).selectAll(doms);添加、插入、删除元素
<body>
<ul>
<li>f</li>
<li>c</li>
<li>Chengdu</li>
</ul>
<script>
// 添加一个元素
d3.select('ul').append('li').text('suix');
// 在指定元素之前插入一个元素
d3.select('ul').insert('li', 'ul li:nth-child(2)').text('c');
// 删除一个元素
d3.select('ul li:last-child').remove();
</script>
</body>选择集
select 和 selectAll 返回的对象称为 选择集
<p id="suix"> suix </p>
<p> misheng </p>
<script>
var home = d3.selectAll('p');
console.log(home.empty()); // false 判断选择集是否为空
console.log(home.node()); // <p> suix </p> 返回第一个非空元素，为空就返回 null
console.log(home.size()); // 3 返回选择集中的元素个数
</script>常用方法
// 获取属性
d3.select('#suix').attr('title');
// 设置属性
d3.select('#suix').attr('title', 'suix')
d3.select('#suix').attr({
'title': 'suix',
'name': '青松'
})
// 这样添加class
d3.select('#suix').attr('class', 'shuai handsome');
// 也可以这样
d3.select('#suix').classed({
'shuai': false, // 不开启 shuai 这个类
'handsome': true // 开启 handsome
});
// 样式设置
d3.select('#suix')
.attr('class', 'handsome')
.style({
'color': 'blue',
'font-size': '25px'
});
// 获取input中输入的内容
d3.select('#input').property('value');
// 设置input中输入的内容
d3.select('#input').property('value', '轻松学D3');
// 获取文本
d3.select('#suix').text();
// 获取html
d3.select('body').html();
// 将选择集自身作为参数传递给函数
d3.selectAll('p').call(test);
// 等同与
function test(select){
select.attr('name', 'home');
}
test(d3.selectAll('p'));
// 排序
var numbers = [5,8,2,7,6];
// 递增
numbers.sort(d3.ascending);
// 递减
numbers.sort(d3.descending);
// 最小值
d3.min(numbers);
// 最大值
d3.max(numbers);
// [最小值,最大值]
d3.extend(numbers);
// 求和 如果数组为空 返回 0
d3.sum(numbers);
// 求平均值 如果数组为空 返回 undefined
d3.mean(numbers);
// 生成等差数 [start, stop, step]
d3.range(2, 10, 2); // [2, 4, 6, 8]
// 随机排列数组
d3.shuffle(numbers);
// 合并数组
d3.merge([[1, 2], [3, 4]]); // [1,2,3,4]
// 数据映射
var datas = [
{id: 1, name: 'f'},
{id: 2, name: 'c'},
{id: 3, name: 'c'},
];
// 用datas构建映射，用id作为键
var map = d3.map(datas, function(d){
return d.id;
});
// 判断指定的key 是否存在
map.has(1); // true
// 返回指定 key 的value
map.get(1); // {id: 1, name: "f"}
// 设置内容
map.set(4, {id: 4, name: 'Chengdu'});
// 删除映射
map.remove(4);
// 返回所有的key
map.keys();
// 返回所有的value
map.values();
// 返回所有的key 和 value
map.entries();
// 判断映射是否为空
map.empty();
// 返回映射的大小
map.size();
// 已数组形式返回映射
map.forEach(function(k, v){}); // 3.x 版本
map.each(function(k, v){}); // 4.x 版本数据绑定
为选择集中每一个元素都绑定相同的数据值
// 在被绑定了数据的选择集中添加元素后，新元素会继承该数据
d3.selectAll('li').datum('fcc');
/*
[
[
{
"__data__": "fcc"
},
{
"__data__": "fcc"
},
{
"__data__": "fcc"
}
]
]
*/为选择集中每一个元素分别绑定数组的每一项值
d3.selectAll('li').data([3,5])
/*
[
[
{
"__data__": 3
},
{
"__data__": 5
}
]
]
*/什么是 update、enter、exit ？
Update 已经存在的元素, Enter“丢失”的元素, Exit多余的元素
update、enter(绑定数据数量 > 对应元素)
<body>
<ul>
<li>update</li> <!-- 3 -->
<li>update</li> <!-- 6 -->
<li>update</li> <!-- 9 -->
<!-- 没有绑定上的dom元素就是 enter 12 -->
<!-- 没有绑定上的dom元素就是 enter 15 -->
</ul>
<script>
var datas = [ 3 , 6 , 9 , 12 , 15 ];
var li = d3.select("ul").selectAll("li");
//获取update部分
var update = li.data(datas);
//获取enter部分
var enter = update.enter();
</script>
</dody>update、exit(绑定数据数量 < 对应元素)
<body>
<ul>
<li>update</li> <!-- 3 -->
<li>update</li> <!-- 6 -->
<li></li> <!-- 没有数据绑定的就是 exit -->
</ul>
<script>
var datas = [ 3 , 6];
var li = d3.select("ul").selectAll("li");
//获取update部分
var update = li.data(datas);
//获取exit部分
var exit = update.exit();
// 移除多余元素
exit.remove();
</script>
</dody>