您的位置：首页 > Web前端 > JavaScript

【 D3.js 入门系列 --- 7 】理解 update, enter, exit 的使用

2015-02-25 18:03 344 查看

本人的个人博客为： www.ourd3js.com

csdn博客为：
blog.csdn.net/lzhlzz

转载请注明出处，谢谢。

在前面几节中重复出现了例如以下代码：

svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")

当所选择的 rect 数量比绑定的数据 dataset 的数量少的时候，一般会用到以上代码，这一节就具体说说当被选择元素和数据数量不一致时该怎样处理。

这一节将涉及到三个函数。

1. update() 当相应的元素正好满足时（绑定数据数量 = 相应元素）

实际上并不存在这样一个函数，仅仅是为了要与之后的 enter 和 exit 一起说明才想象有这样一个函数。但相应元素正好满足时，直接操作就可以，后面直接跟 text ，style 等操作就可以。

2. enter() 当相应的元素不足时[b] （绑定数据数量 > 相应元素）[/b]

当相应的元素不足时，通常要加入元素，使之与绑定数据的数量相等。后面通常先跟 append 操作。

3. exit() [b] 当相应的元素过多时（绑定数据数量 < 相应元素）[/b]

当相应的元素过多时，通常要删除元素，使之与绑定数据的数量相等。后面通常要跟 remove 操作。

以下看看详细的使用方法：

<body>
<p>AAAAAAAAA</p>
<p>BBBBBBBBB</p>
<p>CCCCCCCCC</p>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>

var dataset = [ 10 , 20 , 30 , 40 , 50 ];

var update = d3.select("body").selectAll("p").data(dataset);
var enter  = update;

update.text(function(d,i){
return "update " + d;
});

enter.enter()
.append("p")
.text(function(d,i){
return "enter " + d;
});

</script>
</body>

上面的代码分别用了变量名 update 和 enter 来表示各自的部分，上面的代码的结果为：

结果图能够看到新加入的元素 enter 的部分。

改一部分代码，看看怎么用 exit 。

var dataset = [ 10 , 20 ];

var update = d3.select("body").selectAll("p").data(dataset);
var exit  = update;

update.text(function(d,i){
return "update " + d;
});

exit.exit()
.text(function(d,i){
return "exit";
});

结果图为：

能够看到，调用 exit() 函数后，实际上是返回没有相应数据的元素。通常我们能够删除掉多余的元素，如：

exit.exit()
.remove();

尤其以 enter 函数的使用最为多见。由于通经常使用 D3 做数据可视化时，我们都拥有须要的数据，并且数据量巨大，文档中非常少有足够数量的与之相应的元素。所以要特别熟练 enter 的用法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用

【 D3.js 入门系列 --- 7 】理解 update, enter, exit 的使用