可视化工具D3.js教程入门（第三章）——理解 Update-更新元素节点 & Enter-增加元素节点 & Exit-删除元素节点

最新推荐文章于 2024-01-28 13:05:32 发布

viceen

最新推荐文章于 2024-01-28 13:05:32 发布

阅读量984

点赞数 1

分类专栏：可视化文章标签： html html5 javascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/120417223

版权

可视化专栏收录该内容

130 篇文章

订阅专栏

本文通过实例详细讲解了D3.js中的Update、Enter和Exit三个关键概念，帮助读者理解如何动态添加、更新和删除DOM元素以实现数据驱动的可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可视化工具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

在这里插入图片描述

控制台打印的数据：

在这里插入图片描述

注意

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

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

在这里插入图片描述

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>