D3 数据可视化001

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

D3 模式  
Update Mode => Enter Mode => Merge Mode => Exit Mode

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

 

Update mode

 

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

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

Enter mode

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) // 将数据直接渲染为文本内容

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

Exit mode

     

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()方法合并数据，如上图中的 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>