举一个例子来说这3个东西吧。
现在页面上有3个座位，和两个数组。
座位对应选择集，两个数组对应数据集。需要将数组的数据和座位绑定起来。stu1的数据明显多于座位，stu2则少于座位。
1.update 和 enter
<body>
<p class="seat1">seat1</p>
<p class="seat2">seat2</p>
<p class="seat3">seat3</p>
<script>
var stu1 = ['zhangsan', 'lisi', 'wangwu', 'zhaoliu'];
var stu2 = ['zhangsan'];
var p = d3.select("body").selectAll('p');
var update = p.data(stu1); //绑定数据，得到update部分
update.text(function (d, i) {
return "第 " + i + " 座位: " + d;
})
</script>
</body>
输出结果
第 0 座位: zhangsan
第 1 座位: lisi
第 2 座位: wangwu
这里可以看到刚好有3个座位，则把stu1中前三个同学都安排了。这里3个座位就对应stu1中前三个同学。我们也将这一部分的选择集理解为为update，那剩下一个同学怎么办呢?看下面的代码
<body>
<p class="seat1">seat1</p>
<p class="seat2">seat2</p>
<p class="seat3">seat3</p>
<script>
var stu1 = ['zhangsan', 'lisi', 'wangwu', 'zhaoliu'];
var stu2 = ['zhangsan'];
var p = d3.select("body").selectAll('p');
var update = p.data(stu1); //绑定数据，得到update部分
update.text(function (d, i) {
return "第 " + i + " 座位: " + d;
})
//给剩下的同学安排上
// 给剩下的同学安排上
var enter = update.enter().append('p'); //得到enter() 部分
enter.text(function(d) {
return "给 " + d + " 加了一个座位"
})
</script>
</body>
输出结果
第 0 座位: zhangsan
第 1 座位: lisi
第 2 座位: wangwu
给 zhaoliu 加了一个座位
因为原本的选择集不够数据集元素绑定了，这里可以调用enter()方法，让d3给剩下的数据集留出位置。所以这里需要append("p")加一个座位。我们将这部分选择集理解为Enter
这里你可在代码中加上一句话
enter.style('color', 'red')
你会看到只有最后一个同学的文字颜色变色了
1.update 和 exit
如果理解了前面的update和enter、这里就简单多了。update和前面一样，就是选择集和数据集对应的那部分。exit与enter相反。enter是选择多出来的那一部分，一般对于这部分选择集的操作都是直接remove()
<body>
<p class="seat1">seat1</p>
<p class="seat2">seat2</p>
<p class="seat3">seat3</p>
<script>
var stu1 = ['zhangsan', 'lisi', 'wangwu', 'zhaoliu'];
var stu2 = ['zhangsan'];
var p = d3.select("body").selectAll('p');
var update = p.data(stu2);
update.text(function (d, i) {
return "第 " + i + " 座位: " + d;
})
var exit = update.exit();
exit.text(function(d) {
return '座位是空的'
})
.style('color', 'red')
</script>
</body>
输出结果
第 0 座位: zhangsan
座位是空的
座位是空的
网友评论