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

d3.js——update、enter、exit

2016-04-25 11:33 615 查看

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>

运行结果如下：我们可以看到新添加的元素 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() 函数后，实际上是返回没有对应数据的元素。所以我们通常要跟
remove 操作删除掉多余的元素：

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

标签：

相关文章推荐

新的分享

章节导航