可视化工具D3.js教程入门（第三章）—— 理解 Update Enter Exit

咱们来说说 Update Enter Exit 他们的使用

由于上一篇说到的data()方法给元素绑定数据是需要元素与数据一一对应的关系，

那么如果元素个数与数据个数对不上了怎么办？有可能存在元素多了或者数据多了的情况，

对于这种情况就需要用到咱们要说的这三个方法了,或者说数据绑定的三个步骤，

Update 更新元素节点（绑定数据时默认进行的）

Enter 增加元素节点（这个的后面会用的很多）

Exit 删除元素节点

举例如下：

1、Update Enter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<h2>《执迷不悔》</h2>

<h3></h3>
<h3></h3>
<h3></h3>


</body>
<script>

    var lyrics = [

        '我不是你们想的如此完美',
        '我承认有时也会辨不清真伪',
        '并非我不愿意走出迷堆 只是这一次',
        '这次是自己(而)不是谁',
        '要我用谁的心去体会 真真切切地感受周围',
        '就算痛苦 就算是泪 也是属于我的伤悲',
        '我还能用谁的心去体会 真真切切地感受周围',
        '就算疲倦 就算是累 也只能执迷(而)不悔'

    ]

    var h3 = d3.select('body').selectAll('h3');
//    var h3 = d3.selectAll('h3');

    var updata = h3.data(lyrics);
    var enter = updata.enter();
    console.log(updata)
    console.log(enter)

    updata.text(function (v, i) {
        return v;
    })

    //    代码执行到这里 页面所展示内容如下
    //
    //    执迷不悔
    //    我不是你们想的如此完美
    //    我承认有时也会辨不清真伪
    //    并非我不愿意走出迷堆 只是这一次


    //因为h3标签不够  所以需要先添加h3标签 再给新添加的h3标签绑定后续的数据

    var addH3 = enter.append('h3');//注意 这里是往enter中插入h3
    console.log(enter)
    addH3.text(function (v, i) {//给新添加的h3标签 绑定数据
        return v;
    })

//    执行到这里 页面展示内容如下
//
//    《执迷不悔》
//    我不是你们想的如此完美
//    我承认有时也会辨不清真伪
//    并非我不愿意走出迷堆 只是这一次
//    这次是自己(而)不是谁
//    要我用谁的心去体会 真真切切地感受周围
//    就算痛苦 就算是泪 也是属于我的伤悲
//    我还能用谁的心去体会 真真切切地感受周围
//    就算疲倦 就算是累 也只能执迷(而)不悔


</script>
</html>

这里贴一张控制台打印的数据：

可视化工具D3.js教程入门（第三章）—— 理解 Update Enter Exit

另外还得强调一下如果 var h3 = d3.selectAll('h3'); 这样直接获取到的h3集合，在新添h3标签的时候会存在问题，你新添加的元素就在body外了如下图”：

可视化工具D3.js教程入门（第三章）—— 理解 Update Enter Exit

2、Update Exit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<h3>这是一个h3标签</h3>
<h3>这是一个h3标签</h3>
<h3>这是一个h3标签</h3>
<h3>这是一个h3标签</h3>
<h3>这是一个h3标签</h3>
<h3>这是一个h3标签</h3>
<h3>这是一个h3标签</h3>

</body>

<script>

    var lyrics = [
        '我不是你们想的如此完美',
        '我承认有时也会辨不清真伪'
    ]
    var h3 = d3.select('body').selectAll('h3');


    var  updata = h3.data(lyrics);
    var  exit = updata.exit();
    console.log(updata)
    console.log(exit)

    updata.text(function (v,i) {
        return v;
    });

//    执行到这里 界面显示的内容
//
//
//    我不是你们想的如此完美
//    我承认有时也会辨不清真伪
//    这是一个h3标签
//    这是一个h3标签
//    这是一个h3标签
//    这是一个h3标签
//    这是一个h3标签




//    exit.remove();//删除多余的h3元素
    exit.text(function (v,i) {
        return '我不删了，我就留着';
    });

//    执行到这里 界面显示的内容
//
//    我不是你们想的如此完美
//    我承认有时也会辨不清真伪
//    我不删了，我就留着
//    我不删了，我就留着
//    我不删了，我就留着
//    我不删了，我就留着
//    我不删了，我就留着

</script>

</html>

3、咱们来张图阐述下Update Enter Exit三者的关系或者说是步骤，

　　　var array = [3,6,9,12,15]; 有这样一组数据，还有三个p标签；

可视化工具D3.js教程入门（第三章）—— 理解 Update Enter Exit

可视化工具D3.js教程 入门 （第三章）—— 理解 Update Enter Exit

相关推荐

可视化工具D3.js教程入门（第三章）—— 理解 Update Enter Exit