可视化工具D3.js教程 入门 （第三章）—— 理解 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>
效果1

js框架如何更新es js更新节点的方法_html5

控制台打印的数据：

js框架如何更新es js更新节点的方法_javascript_02

注意

如果 var h3 = d3.selectAll(‘h3’); 这样直接获取到的h3集合 ，

在新添h3标签的时候会存在问题 ，你新添加的元素 就在body外了 如下图”：

js框架如何更新es js更新节点的方法_数据_03

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>
效果2

js框架如何更新es js更新节点的方法_javascript_04

打印数据2

js框架如何更新es js更新节点的方法_html5_05

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

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

关系图

js框架如何更新es js更新节点的方法_数据_06