D3js学习–update, enter, exit 的使用

2015年02月10日 javascript, 前端技术, 网站建设 暂无评论 阅读 387 views 次

1. update()

当对应的元素正好满足时 ( 绑定数据数量 = 对应元素 )

实际上并不存在这样一个函数,只是为了要与之后的 enter() 和 exit() 一起说明才认为有这样一个函数。当对应元素正好满足时,后面直接跟 text ,style 等操作即可。

2. enter()

当对应的元素不足时 ( 绑定数据数量 > 对应元素 )

当对应的元素不足时,要添加元素,使之与绑定数据的数量相等。后面跟 append 函数添加元素。

3. exit()

当对应的元素过多时 ( 绑定数据数量 < 对应元素 )

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

4. 使用方法

上面的代码分别用了变量名 update 和 enter 来表示各自的部分,运行结果如图:

           71

图中可以看到新添加的元素 enter 的部分。

接下来修改部分代码,看看怎么用 exit 。

结果图为:

    72

可以看到,调用 exit() 函数后,实际上是返回没有对应数据的元素。我们可以删除掉多余的元素,如下:

enter 函数的使用最为多见。因为用 D3 做数据可视化时,有需要的数据,且数据量巨大,DOM 却中很少有与之对应数量的元素。所以要特别熟练 enter 的使用方法

给我留言

您必须 登录 才能发表留言!