可视化（Visual） SQL 初探

2023-10-31
浙江
本文字数：3446 字
阅读完需：约 11 分钟

数新网络，让每个人享受数据的价值

一、背景

在当今数字化时代，数据信息作为企业和组织的宝贵资源之一，如何挖掘其中的价值并帮助企业和组织个体决策，已然成为炙手可热的话题。数据分析作为其具体载体，是从数据中提取信息、洞察机遇、制定战略、做出决策的关键过程。再者，SQL 作为数据分析的核心，扮演着不可或缺的角色。SQL 是一种强大的编程语言，用于管理和查询关系型数据库中的数据。它使数据分析师和数据库管理人员能够轻松地提取、过滤、汇总和转换大量数据，解决各种业务问题。

然而，掌握 SQL 这门语言并非易事。SQL 不仅包括简单的 SELECT 查询、INSERT 插入等语句，也包括 JOIN、GROUP BY、HAVING 等复杂概念和特定的语法及函数。也因为这些 SQL 的高门槛性，限制了数据分析的普世发展。

正是在这样的背景之下，可视化 SQL 工具优势变得尤为明显。该工具以可视化、工具化的方式呈现 SQL 任务，让使用者用图形化的方式完成 SQL 的创建与修改而不必直接书写 SQL 语句，从而整体降低使用者的学习曲线、提高效率、减少人为细节错误。并且可视化展示 SQL 任务也能让业务更直观

二、基本概念介绍

该部分涉及 SQL 和可视化部分的基本概念介绍，因篇幅有限，此处会侧重介绍与 SQL 可视化相关的部分信息，完整的资料可前往本篇结尾的索引部分

01、SQL

SQL（Structured Query Language）是一种用于管理和操作关系型数据库的标准化编程语言。以下是 SQL 的一些基本概念：

数据库管理

创建数据库、表格和其他数据库对象，以及管理它们的结构和关系。

数据操作

允许用户执行各种数据操作，包括查询以获取特定数据、插入新数据、更新现有数据和删除数据。

数据查询

通过 SELECT 语句，用户可以从一个或多个表格中检索数据，并可以对结果进行排序、筛选和聚合。

数据完整性

通过约束，如主键、外键和唯一约束，以确保数据的完整性和一致性。

数据运算

用与常用的数学运算，如计算总和、平均值、统计数据和执行复杂的数据操作。

标准化

SQL 是一个标准化的语言，具有广泛的支持和广泛的学习资源。它允许不同数据库管理系统（如 MySQL、Oracle、SQL Server）使用相同的语法进行操作。

02、可视化

可视化（Visual）是一种呈现方法，通过使用图形、图表和视觉元素，将抽象的数据结构转化为可见和易于理解的形式，通过可视化，将 SQL 语句可视化呈现，帮助用户快速、轻松的理解操作语句的条件、关联关系等，以图形和仪表板的形式展示，使复杂的业务查询变得直观可见。一般来说，可视化包括以下部分：

建立连接

使用可视化工具建立与数据库的连接。这通常需要提供数据库的连接信息，如主机名、用户名、密码等。

操作实体

可创建表、定义字段、更新表

操作语句

使用 SELECT 来选择特定的数据，或者执行其他 SQL 操作，如 INSERT、UPDATE、DELETE 等

限定条件

可视化选择 WHERE 语句的条件，限定 GROUP BY/ORDER BY 等

子查询

可视化呈现查询关系

三、方案分解

01、结构化 SQL

拆解

通过 SQL 的拆解完成结构化描述，以此表达数据元素之间的关系和操作，以便有效的进行数据的访问和处理。首先以一个简单的 SQL 语句为例

以上图为例，一条 SQL 包含了操作、对象、查询条件，也会包含更高级的子表、联表、视图等。

抽象语法树

抽象语法树（Abstract Syntax Tree，AST）是一种树状数据结构，用于表示编程语言的源代码的抽象结构。它将代码分解成语法元素（如语句、表达式、变量声明等），并以层次结构的方式表达其关系。

通过抽象语法树方法，对 SQL 语句进行结构化处理，得到对象、操作、条件等，以此达到数据化存储运算的目的，以下为抽象语法树的转换例子

02、图

图通过视觉元素（矩形、点、线）等表达业务关系。

在可视化 SQL 中可通过图形与 SQL 结构化数据对应，完成 SQL 的图表达

03、转换

SQL 与图分别由对应的数据模型控制，两者相互之间的转换同步由对应的数据模型之间的同步更新完成。又因为无论是图操作还是 SQL 输入，均有可能导致两者无法同步，会有同步状态表示当前 SQL 与图是否“相等”

四、实现设计

01、流程

用户输入转化为图

图操作转换为 SQL

02、界面介绍

表节点

通过拖拽左侧表节点至右侧图区域可生成表节点，包含选择表，显示表字段信息能力

操作节点

通过拖拽左侧操作节点至右侧图区域可生成操作节点。以 SELECT 节点为例，包含选择字段、配置条件等能力

节点之间通过单向边连接，表示节点关系，如 FROM，子表，JOIN 等

图区域

SQL 可视化区域，包含拖拽、连线、删除、节点操作等能力，可视化清晰展示 SQL

SQL 代码区域

代码显示区域，支持用户修改

合法提醒

提示图与 SQL 输入的等效关系，也表示当前是否合法

03、演示

视频演示链接：

https://live.csdn.net/v/336530

04、引用框架介绍

Vue.js 是一款现代化的 JavaScript 框架，用于构建用户界面和单页面应用程序。Vue 具有响应式数据绑定、组件化开发、简洁的模板语法和强大的生态系统等特性，使其成为构建现代 Web 应用程序的强大工具。

CodeMirror

CodeMirror 是一款高度可定制的开源文本编辑器，特别适用于在 Web 应用程序中嵌入代码编辑功能。它支持多种编程语言和文件格式的语法高亮显示，拥有丰富的插件和主题库，以及交互式的编辑功能，使开发者能够创建强大的代码编辑器和开发环境。

Antv X6

AntV X6（Ant Visualization X6）是一个基于 JavaScript 的现代数据可视化库，帮助开发者创建交互性强、美观的数据可视化图表和图形。AntV X6 具有强大的可扩展性，支持绘制各种图表，包括流程图、组织图、树状图等，同时提供了丰富的布局和自定义选项，广泛应用于数据仪表板、数据分析和数据可视化应用程序的构建。