基于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的靈活性與可擴展性。未來，將繼續探索可視化技術在數據領域的應用，并結合最新的技術，推動企業級數據處理和管理的發展。