理解update-enter-exit三个函数的用法

最新推荐文章于 2021-04-02 16:42:30 发布

MayMayJn

最新推荐文章于 2021-04-02 16:42:30 发布

阅读量1.5k

点赞数

分类专栏：大数据文章标签： d3

本文链接：https://blog.csdn.net/MayMayJn/article/details/54407297

版权

大数据专栏收录该内容

3 篇文章 0 订阅

订阅专栏

update、enter、exit是D3比较重要的三个函数。
先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>理解update-enter-exit三个函数的用法</title>
</head>
<body>
    <p>Apple</p>
    <p>Pen</p>
    <p>AppelPen</p>

    <script src="http://d3js.org/d3.v3.js"></script>
    <script>
        // 选择集
        var body = d3.select("body");
        // 数据绑定
        var dataset = [30, 40, 50, 60, 70];

        var p = body.selectAll("p");

        var update = p.data(dataset); 

        var enter = update.enter(); 

        var exit = update.exit();

        console.log(update);

        console.log(enter);

        console.log(exit);

    </script>
</body>
</html>

在HTML文档中定义了三个P元素，以便后面D3数据的绑定。再用D3选择所有的P元素，用的是selectAll()函数。
再使用data函数选择数据，选择的部分就是update。enter和exit都是update的部分。
update就是已经绑定了的元素部分。用console.log(update); 输出，我们可以看到三个p元素分别绑定了30，40，50三个数。所以我理解的update就是数据和元素共同绑定的部分。比如说你有你有5株多肉植物，我只有三个花盆，那我们现在可以种三盆植物，这三盆呢就是update部分啦。
这里写图片描述
我再看看console.log(enter); enter输出的是什么：

enter部分输出的就是update部分没有绑定的剩下的两个数据，因为这里它没有元素可以绑定，所以就是木有绑定的元素的内容。
就是我剩下的那两株没有盆的多肉。
exit输出的是当数据量比元素个数要小的时候，才会有内容，我们把刚刚的程序的数组长度变为2，var dataset = [30, 40];
这个时候我再来看看输出的是什么：
这里写图片描述
我们看到这里输出了一个多余的P元素，因为它没有数据绑定，所以出现在了这里。比如说你有你有3株多肉植物，我有5个花盆，那么两个多余的盆就会出现在exit里
面。
这三个部分在很多程序中的处理方法都是有很多模式可寻的。
我们现在在把数据更改为5个。var dataset = [30, 40, 50, 60, 70];
我们把有数据绑定的部分的内容更改为数据的本身

var update = p.data(dataset)
            .text(function(d) {
                return d;
            });

它的输出就变成了数据本身
这里写图片描述
对于enter部分，有数据没有元素与之绑定，我们就要添加元素

var enter = update.enter()
                .append("p")
                .text(function(d) {
                    return d;
                });

我们看到输出了所有data数据，可是我们明明只有三个P元素啊，那剩下两个数据是怎么出来的呢：
这里写图片描述
我们在打开调试模式检查一下网页的元素，我们看到下面添加了两个p段落，这两个段落就是通过enter添加的。

对于数据量比较少的时候，多余的元素通常是没有用的，所以他的处理手法是remove() ,

var exit = update.exit()
                        .remove();

我们再把数据改成两个
现在再刷新页面就只有两个P段落了
这里写图片描述

到这里大概就滤清这三个函数的用法了。
最后贴上完整的代码。看一遍没用，试一下才知道！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>理解update-enter-exit三个函数的用法</title>
</head>
<body>
    <p>Apple</p>
    <p>Pen</p>
    <p>AppelPen</p>

    <script src="http://d3js.org/d3.v3.js"></script>
    <script>
        // 选择集
        var body = d3.select("body");
        // 数据绑定
        var dataset = [30, 40, 50, 60, 70]; //根据需要选择数据的长短
        // var dataset = [30, 40];

        var p = body.selectAll("p");

        var update = p.data(dataset)
                        .text(function(d) {
                            return d;
                        }); 

        var enter = update.enter()
                        .append("p")
                        .text(function(d) {
                            return d;
                        }); 

        var exit = update.exit()
                        .remove();

        console.log(update);

        console.log(enter);

        console.log(exit);

    </script>
</body>
</html>