基于AntV G6的Kettle工具前端设计与实现

胡天一，张浩洋，顾丹鹏

（1. 中国电建集团华东勘测设计研究院有限公司，杭州 311122；2. 浙江华东工程数字技术有限公司，杭州 311122）

0 引言

在当今数据驱动的世界中，企业对大量数据进行处理、转换并加载到各种系统中的过程被称为ETL（提取、转换、加载），其是数据仓库获取高质量数据的关键环节［1］。Kettle 是一种广泛使用的ETL 工具，可帮助企业从各种来源提取数据，根据业务需求对其进行转换，并将其加载到目标系统中。然而，Kettle 的C/S 架构限制了它的灵活性，使得构建B 端应用程序的数据交换变得十分困难。

为了克服Kettle架构的局限性，本文提出了一种使用Antv G6 图形可视化引擎作为可视化开发工具，设计并实现了Kettle工具前端功能的解决方案。该方案利用了G6 的自定义机制，提高了Kettle的灵活性与可扩展性。

1 介绍

1.1 Kettle工具

Kettle（Pentaho Data Integration）是一个开源的ETL 工具，由Pentaho 开发和维护。它可用于提取、转换和加载数据，支持各种数据源和目标，如文件、数据库、Web 服务等。Kettle 提供了一个图形化的界面，使用户可以通过简单地拖放和链接组件来构建ETL 流程，而无需编写代码。Kettle 还提供了丰富的转换和处理功能，如数据清洗、聚合、关联和过滤等，以及强大的调度和监控功能，以确保数据的可靠性和准确性。Kettle 还支持多种数据格式和协议，并提供了大量的插件和扩展，使用户可以轻松地将其与其他工具和平台集成。由于其易用性、可靠性和灵活性，Kettle 在商业领域中广泛应用于数据集成、数据仓库、商业智能和数据分析等方面。

1.2 Kettle的局限性

Kettle 使用的是C/S 架构，可以满足很多ETL应用场景的需求。但是，当需要构建B端应用时，Kettle的C/S架构存在一些局限性。首先，C/S 架构的服务器端需要部署在本地或者专门的服务器上，这增加了部署和维护的成本。其次，客户端的用户界面只能在桌面应用程序中使用，无法在Web应用程序中使用。最后，C/S 架构的限制使得Kettle很难与其他Web应用程序和数据源集成，这限制了它的灵活性和可扩展性。

2 方案

解决Kettle 本身C/S 架构的局限性，最直接的方法就是摒弃C/S架构，通过构建Web应用来实现Kettle 功能。而要在Web 应用中实现Kettle功能，前端的可视化技术必不可缺。随着浏览器性能的提升，可视化技术已经相当成熟，许多企业都已经使用该技术来呈现复杂的数据和信息。并且前端的可视化框架也非常丰富，例如D3.js、ECharts、Highcharts 等，都能提供丰富的图表和可视化组件，具备强大的数据处理和渲染能力。

本文选择了Antv G6 图可视化引擎来进行应用开发。G6 是蚂蚁集团数据可视化团队设计实现的图形可视化库。G6 结合了基于模板的配置以获得高可用性和灵活的定制，以获得高表达性。为了提高开发效率，G6 提出了一套机制，包括状态管理和交互模式。布局、算法和插件的丰富集成使G6具有更高级别的分析能力［2］。

本文通过G6 提供的自定义节点、自定义边功能以及大量的内置图布局，在Web 应用中设计实现Kettle 的交互功能，从而解决了Kettle 架构局限性带来的问题。

3 设计实现

3.1 功能概述

Kettle 包含转换和作业，二者交互模式基本相同，主要功能和交互如下：

（1）创建节点：左侧核心对象树节点拖拽进入画布，并打开弹窗进行节点编辑。

（2）节点编辑：双击或者右击节点打开弹框进行内容编辑。

（3）节点拖拽：按住节点四周进行拖拽。

（4）节点连接：按住节点中心区域后移动光标，节点将延伸出连接线。将光标落在另一节点，连线即被创建。

（5）画布交互：按住画布移动进行拖拽等。

（6）状态变化：光标经过节点时，节点和连线样式变化。

根据上述功能，本文利用G6 进行节点、连线和画布设计。

3.2 节点设计与实现

首先在设计功能逻辑之前，需完成节点本身的设计。Kettle 中的节点形状基本为带边框的正方形，并且在与鼠标指针重叠时会发生状态变化，这里可使用自定义节点实现该效果。在设计自定义节点时，G6定义了三个方法：

（1）draw（cfg,group）：绘制，提供了绘制的配置项（数据定义时透传过来）和图形容器，必须返回合理的图形作为keyShape。

（2）update（cfg,n）：更新，更新时的配置项（更新的字段和原始字段的合并）和元素对象。

（3）setState（name,value,item）：响应节点和线状态的变化。

根据上述方法可知，需要在自定义节点时利用draw 方法进行节点Shape 及keyShape 的设计。根据Kettle 中的节点形状，在draw 方法中添加总边框、外边框、内边框，在afterDraw 方法中对内边框进行状态控制，同时在setState 方法中实时监听节点的状态，根据节点状态是否被选中，改变节点内边框的颜色，实现节点对鼠标指针移动事件的响应。

G6 的图提供了事件监听的方法，通过在全局graph 实例上绑定事件监听，即可实现节点与画布对鼠标事件的响应。事件监听方法graph.on（EventName, Handler）接收两个参数，第一个是事件名，第二个是监听函数。EventName约定了以下事件类型：通用交互事件、Node交互事件、Edge 交互事件、Canvas 交互事件和时机事件。不同类型的交互事件分别对应不同的交互逻辑，根据G6 提供的这些事件响应，即可执行用户自定义的回调方法。

利用上述方法，3.1 中提到的功能可通过如下设计实现：

（1）创建节点。

通过对元素dragend 事件进行监听，添加弹窗打开的事件回调，以元素当前在画布中的位置为中心，即可创建对应的节点并打开弹窗进行内容编辑。

（2）节点编辑。

在node实例上绑定node:dbClick 事件，并添加弹窗打开的事件回调，实现用户对节点进行双击时就会打开弹窗进行内容编辑的操作。

在node 实例上绑定node:contextmenu 事件与右键菜单弹窗打开的事件回调，实现用户对节点进行鼠标右击时打开下拉选项的操作。（3）节点拖拽。

在node 实例上绑定node:dragstart、node:dragend 事件，实现用户对节点的拖拽操作。

对节点进行的设计完成后，图中的节点展示如图1和图2所示。

图1 转换的节点展示

图2 作业的节点展示

3.3 连线设计与实现

首先，在draw 方法中设置连线的Shape，并设计连线的默认样式以及相应区域。状态控制原理与节点设计类似，在setState 方法中监听连线是否被选中，由状态控制样式决定。由于G6内置提供了创建边的配置项，因此在完成基本Shape设计后，在全局graph实例配置create-edge为drag 方式即可。此处需要注意，当节点源头与目标为同一个节点时，连线会默认从节点出发连接到节点自身。为了避免这种情况发生，需要在连线创建事件回调中进行判断，若source与target节点相同，则取消创建连线的操作。

由此，3.1 节中提到的节点连接功能可通过如下设计实现：

在配置完create-edge 选项后，在graph 实例上绑定aftercreateedge 事件，判断连线的source和target节点，若不同，则完成连线创建。

对连线进行的设计完成后，图中的节点与连线展示如图3和图4所示。

图3 转换的节点与连线展示

图4 作业的节点与连线展示

3.4 画布设计与实现

画布功能主要为画布放缩、平移、居中、自适应等。对于放缩与平移操作，G6在初始化graph时提供了模式设置，只需在默认模式中启用zoom-canvas和drag-canvas即可。而针对画布的居中与自适应，G6在graph提供了视口操作api，使用fitCenter和fitView方法即可实现对应操作。

3.5 小结

利用G6 的优势，本节对节点、连线和画布进行了设计与实现，完成了Web 应用中的Kettle工具的开发，克服了传统Kettle 工具C/S 架构的局限性。通过前端可视化技术，提升了工具的灵活性和可定制性，并为用户提供了出色的跨平台和跨终端体验，为B 端数据交换应用提供了一种解决方案。

4 结语

本文介绍了Kettle 的概念，讨论了Kettle 工具C/S 架构在构建B 端应用中的局限性。针对这些局限性，本文提出了一种利用AntV G6 实现Kettle 工具前端功能的解决方案，提高了Kettle的灵活性与可扩展性。未来，将继续探索可视化技术在数据领域的应用，并结合最新的技术，推动企业级数据处理和管理的发展。