D3.js数据可视化入门：Update、Enter、Merge、Exit模式详解

D3.js数据可视化入门：Update、Enter、Merge、Exit模式详解

引用

CSDN

1.

https://blog.csdn.net/qq_36433608/article/details/137555830

D3.js是一个强大的数据可视化库，它通过将数据与DOM元素关联起来，实现动态的数据展示。本文将详细介绍D3.js的核心模式（Update、Enter、Merge、Exit）以及如何使用Vue3和D3.js进行数据可视化。

D3.js全称Data-Driven-Documents，注意这和3D可视化(WebGL)没有任何关系。D3.js是一个JavaScript库，不依赖任何其它图形渲染库。是比较底层(靠近dom节点)的利用HTML，SVG，Canvas展示数据的js库，可以定义任何浏览器支持的事件和动画。

D3 模式

D3.js的核心模式包括Update、Enter、Merge和Exit，这些模式帮助开发者管理数据和DOM元素之间的关系。

Update Mode

更新状态：将数据和图形(Html元素)建立对应关系，我们用两个集合的交集比喻，可理解为初始化完毕，处于更新状态。

// Update Mode
let bars = d3.select('#d3Container') // 选择容器
             .selectAll('div.bar') // 预选择占位容器(可能不存在)
             .data(somedata) // 和数据建立连接  

Enter Mode

进入模式：将没有可视化的数据绑定到图形上，以数据集合和图形集合的差集表示，代码层面以Update中的bars集合接着运行bars.enter()方法，就处于进入模式了。

let bars = d3.select('#d3Container').selectAll('div.bar').data(somedata) // Update
    // Enter
    bars.enter()
            .append('div')  // 容器里创建div元素
            .attr('class', 'bar') // 指定类名
            .style('width', (d, i) => d * 3 + 'px') // 将数据和宽度绑定
            .text(d => d) // 将数据直接渲染为文本内容  

Exit Mode

退出模式：如果在数据集合中删除数据时，会在enter状态上产生多余的没有关联数据的图形，这部分图形的集合就是退出模式的集合了，一般进行删除操作。

let bars = d3.select('#d3Container').selectAll('div.bar').data(somedata) // Update
    // Enter
    bars.enter()
            .append('div')
            .attr('class', 'bar')
        .merge(bars) // merge
            .style('width', (d, i) => d * 3 + 'px')
            .text(d => d)
    // Exit
    bars.exit() // 退出模式
        .remove() // 删除多余的图形  

Merge Mode

合并模式：避免重复的数据造成重复的可视化图形，在进入状态中可以使用merge()方法合并数据，如上图中的merge(bars)。

完整代码示例

本节完整代码和效果如下：

// 基于 Vue3 和 D3.js
<script setup>
import { onMounted } from "vue";
import * as d3 from "d3";
// 数据源
const data = [45,56,25,52,32, 56, 77, 102, 13, 47, 83, 35]
// 渲染方法
const render = (somedata) => {
    // Update
    let bars = d3.select('#d3Container').selectAll('div.bar').data(somedata)
    // Enter
    bars.enter()
            .append('div')
            .attr('class', 'bar')
        .merge(bars) // merge
            .style('width', (d, i) => d * 3 + 'px')
            .text(d => d)
    // Exit
    bars.exit()
        .remove()
}
onMounted(() => {
    render(data)
})
</script>
<template>
    <div id="d3Container" class="container">
    </div>
</template>
<style lang="scss">
.container {
    padding: 30px;
    font-size: 20px;
    width: 50vw;
    height: 500px;
    margin:auto;
    background-color: #fbe9d5;
    .bar {
        text-align: end;
        height: 30px;
        background-color: #ff8900;
        color: #fff;
        margin-bottom: 12px;
        padding-right: 6px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }
}
</style>