氣動數據可視化系統的設計與實現

鐘佳伶，黎茂鋒，黃 俊，劉志勤，陳立偉

(西南科技大學 計算機科學與技術學院，四川 綿陽 621010)

0 引言

飛行器的氣動數據主要來源于計算流體力學(CFD,computational fluid dynamics)、風洞試驗及飛行試驗[1]，如何快速有效地表達試驗過程中獲得的數據以便為研究人員提供分析和決策支持，是目前研究的難題之一。氣動數據包含馬赫數Ma、攻角α、側滑角β等重要的屬性信息，同時具有數據量大、維度高、來源廣泛等特點，將多類型的氣動數據集中在同一個平臺上進行分析非常困難。可視化技術可以直觀地呈現氣動數據的變化趨勢，并提供豐富的交互方式，以此利于研究人員揭示數據中包含的空氣動力學特性。

氣動數據主要應用于飛機空氣動力學仿真中，以此根據飛機的空氣動力特征數據來建立飛機的空氣動力模型，隨著技術的進步及對飛機性能的高需求，氣動數據的維度越來越大，結構也越來越復雜[2]。傳統的表格查詢法已經很難滿足試驗任務的需求，取而代之的是龐大復雜的數據表或者曲線形式等。Ananda等人[3]在低雷諾數的條件下，將平板機翼上的升力系數CL，阻力系數CD和俯仰力矩系數Cm進行分析比較，并利用Matlab工具分別可視化了在不同長寬比的有限機翼模型上的升力、阻力及法向力的變化趨勢。Shields和Mohseni等人[4]在限定的雷諾數范圍、錐度比、縱橫比的條件下進行風洞試驗，通過腳本的編寫將試驗過程中獲取的數據進行可視化，并根據可視化的結果圖分析給出了升力系數CL，阻力系數CD和俯仰力矩系數Cm隨攻角和雷諾數變化的情況。

由此可知在此之前的氣動數據分析僅僅對于某一特定類型數據進行分析，所獲取的異源氣動數據無法集中在統一的平臺上，并且分析結果的生成依賴于獨立的分析工具，如Matlab，不能很好地對多個類型的氣動數據進行動態的可視化分析，使得分析結果的共享性不強，為此需要將不同類型的氣動數據規范化在同一個數據庫中，通過建立動態通用的用戶界面(UI，user interface)組件對規范化后的數據進行實時的篩選分析操作，對于大數據量的實時繪制渲染ECharts具有非常好的交互性，氣動數據具有數據量大、來源廣泛等特點，因此利用ECharts可以較好的實現多類型氣動數據的動態可視化，使得科研人員對氣動數據除了數值本身之外更加直觀的理解。

針對上述問題，基于Echarts實現了瀏覽器端氣動數據分析圖表的動態實時渲染與繪制，基于構建的動態UI組件實現了氣動數據的實時篩選，對互聯網環境下進行多類型氣動數據的動態可視化進行了探索和時間，為涉及氣動數據分析的工作人員提供了便利的分析平臺。

1 需求分析與MVVM模式實現

1.1 氣動數據特點與UI需求

氣動數據主要的特點是量大，其重要來源是通過風洞試驗獲取，隨著空氣動力學研究的進步，在試驗過程中產生的數據以及需要考慮的參數也隨之增多[5]，主要包括氣動力、熱、壓三大類型，并且不同的數據類型與之對應的數據也有很大的差異。因此需要對數據進行篩選，如若使用人工篩選的方式不僅耗費大量時間，同時在效率上也得不到保障。由此可知針對數據篩選有必要建立動態通用的UI組件，即根據數據類型及相關參數的設定動態篩選出需要分析的氣動數據。

1.2 MVVM模式的動態機制

MVVM(model-view-viewmodel)模式，是WPF(windows presentation foundation)和Silverlight架構師John Gossman 與2005年提出的[6]，是MVP(model-view-presenter)模式與WPF結合的應用方式時發展演變的一種新型模式框架。MVVM框架模式結構[7]如圖1所示。

圖1 MVVM模式框架結構圖

MVVM主要由頁面視圖(View)、視圖數據模型(ViewModel)、業務邏輯模型(Model)三部分組成。用戶在View的頁面視圖中觸發事件，在建立雙向數據綁定的基礎上通過向視圖數據模型ViewModel發出指令與業務邏輯模型Model實現通信，雙向數據綁定機制實現了頁面視圖模型View與視圖數據模型ViewModel之間數據自動同步更新。在MVVM框架模式中一個視圖數據模型ViewModel可以同時綁定在多個頁面視圖View上，以此來提高系統代碼的復用性。

1.3 可視化中間件與MVVM框架的結合

ECharts是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC和移動設備上，底層依賴矢量圖形庫，通過豐富組件和高度個性化的可視化解決方案,實現用戶和數據之間的交互操作，提供直觀，交互豐富的數據可視化圖表[8-9]。本文使用ECharts作為可視化的中間組件，利用ECharts豐富的人機交互可視化圖表，實現單條數據或者多條數據的動態顯示，結合MVVM框架的動態模板來實現對高維、量大的氣動數據進行可視化分析的操作，由此提高氣動數據分析處理的效率。

2 氣動數據可視化分析

2.1 氣動數據分析總體架構

整個氣動數據可視化分析系統依托已有的氣動數據管理系統，能夠快速地篩選出氣動數據管理系統中所需要進行可視化分析的研究對象及數據集。利用MVVM框架中的動態模板將接收到的JavaScript Object Notation(JSON)數據格式流通過UI組件動態篩選需要分析的數據類型，然后將篩選后的數據進行分析結果可視化的操作。系統主要包含表現層、控制訪問層、業務邏輯層、數據訪問層及數據庫源5大層次結構，其總體架構如圖2所示。

圖2 系統總體架構

2.2 氣動領域常用的數據分析字段

由于氣動數據類型主要包括氣動壓、熱、力三大類型，但是每種類型下所包含的數據參數種類眾多。在本系統中使用到的相關數據分析參數類型[10]如下所示。

1)氣動壓數據分析字段如式(1)所示：

氣動壓：{Ma,Cp,P∞,q,Pt2,γ}

(1)

式中，Cp為壓力系數，P∞為來流靜壓，q為來流動壓，Pt2為皮托壓力，γ為比熱比，Ma為來流馬赫數。

2)氣動熱數據分析字段如式(2)所示：

氣動熱{q,α,ρ,c,k,RC,ΔE,E0}

(2)

式中，q為熱流密度，α為薄膜電阻溫度計溫度系數，ρ為熱流傳感器底部材料的密度，c為熱流傳感器底部材料的比熱容，k為熱流傳感器底部材料的熱傳導系數，RC為熱流放大器熱電模擬網絡時間常數，ΔE為薄膜電阻溫度計兩端電位差的平均值，E0薄膜電阻溫度計兩端初始電壓。

3)氣動力數據分析字段如式(3)所示：

{A,CA,N,CN,M,Cm,CL,CD,q∞,S,Lr,α,L/D}

(3)

式中，A為軸向力，CA為軸向力系數，N為法向力，CN為法向力系數，M為對頂點的俯仰力矩，Cm為對頂點的俯仰力矩系數，CL為升力系數，CD為阻力系數，q∞為自由來流動壓，S為參考面積，Lr為參考長度，α為攻角，L/D為升阻比。

2.3 可視化分析

在氣動數據的可視化分析過程中，作為因變量(y軸)的分析字段有且僅有一個能使其發生變化的自變量(x軸)分析字段。系統定義了可視化分析的4個模塊：氣動數據類型選擇、參數設置、條件過濾設置以及是否執行分析操作，具體的分析過程如圖3所示。

圖3 可視化動態分析泳道圖

1)氣動數據集選擇：首先，需要將異構的氣動數據語義化在同一個數據庫中，在用戶進行數據分析之前需要對系統中收集到的數據類型進行篩選，包括氣動壓、氣動熱、氣動力三大類。其次，選擇需要進行數據分析的研究對象，包括模型、原型兩類。最后，選擇進行分析的數據集。

2)參數設置：由于氣動數據的數據量很龐大，進行參數設置是為了過濾掉分析過程中不需要的數據，系統形成了界面維度選擇、過濾等控件對比較數據字段進行篩選，這樣有利于提高對氣動數據的分析和處理效率。參數條件的設置隨著數據類型的不同而發生變化。

3)條件過濾設置：經過參數設置完成部分數據的篩選后仍會存在很多與分析無關的數據，因此設置條件過濾參數，基于MVVM模式的動態框架實現頁面最小化刷新，將與之相關的數據從數據庫中讀取出來，實現了對氣動數據的二次篩選，以此得到更符合要求、更準確的數據集來進行數據可視化分析的操作。

4)數據可視化分析結果載入：Echarts配合視覺映射組件visualMap提供的豐富的視覺效果，將不同類型的數據映射到不同的視覺呈現面[9]。用戶完成數據集選擇及參數設置后，可以通過“數據分析”按鈕進行氣動數據可視化分析的操作，反之，用戶也可以通過“重置數據”按鈕重新設定數據分析的相關參數。

根據圖3中的分析泳道圖及分析步驟，生成氣動數據分析動態篩選UI組件，得到可視化分析整體UI布局界面如圖4所示。

2.4 可視化組件動態適配

為了更加快速地進行不同類型氣動數據的篩選，使得實時更新出滿足分析需求的數據，系統根據分析維度、數據類型等條件對可視化的UI組件進行動態適配，在人機交互展示界面中，使用氣動學專業術語與數據集的英文命名一一匹配，也便于研究人員能更加迅速的定位所需參數。系統采用MVVM框架動態模板來實現頁面視圖View中最小化的刷新，使節點隨著與之相關變量的改變而更新，由于在氣動數據綁定時，填充的數據量較大，對文檔對象模型(DOM,document object model)的操作頻繁，在保證系統性能的情況下，還需要考慮到數據篩選的效率。快速、準確、完整地實現氣動數據分析相關參數的事件綁定，如可視化分析中x軸需要對馬赫數Ma、攻角α、側滑角β、測力點point等參數進行DOM事件的綁定，預先的參數綁定操作不僅能夠縮短數據的動態篩選時間，還能過濾掉不需要的數據來提高分析及處理效率，以此來實現數據的局部更新只需要更新相關DOM就能將DOM節點和對應的數據進行映射處理，核心代碼如下所示：

圖4 可視化分析整體UI布局界面

function Directive(name, el, vm, expression) {

this.name = name; // 定義指令的名稱

this.els = els; // 定義指令對應的DOM元素，對應數據集中的參數

this.vm = vm; // 定義指令所屬的實例

this.expression = expression; // 定義指令的表達式

this.attr = 'nodeValue'; //代表對應樹節點的值

this.dir_bind();//調用數據動態綁定函數，使數據集與相關參數進行綁定

}

//指令綁定函數

Directive.prototype.dir_bind = function () {

if(!this.expression) return;

//根據指令表達式實行實例化過程，并且在執行該指令對應的update函數

this.dir_instantiate = new Instantiate(

this.vm,

this.expression,

this.dir_update, // 回調函數，進行DOM的更新操作

);

this.update();

};

// 指令更新函數，當數據發生改變時，執行該方法來更新樹節點的值

Directive.prototype.dir_update = function () {

this.update();

console.log('update'+{this.expression});

};

本系統同時適配氣動力、熱、壓的可視化分析，根據需求形成動態通用的交互與可視化呈現的UI組件，通過對UI組件的設定進行數據提取，以此建立氣動數據多維可視化分析系統，通過不同參數的選取及條件值設置來輔助研究人員對氣動數據的分析和處理。

利用UI組件對數據進行提取主要包括3個步驟：1)在選中了數據類型后，系統已經根據氣動數據類型進行了初步篩選，將與之無關的數據采取過濾操作；2)選擇數據集是對是進行二次篩選，即將需要分析的數據集保留；3)參數設置與條件過濾設置均是根據篩選出的數據集信息動態展示數據集中含有的相關參數，與之無關的參數則被隱藏，以此減少研究人員人工篩選的工作量。系統未進行數據動態篩選操作的參數設置如圖5所示。

圖5 數據分析動態UI組件參數設置(部分內容)

1)氣動力數據通過數據的動態篩選機制后自動適配出與之對應的UI界面如圖6所示。

圖6 氣動力數據動態篩選參數設置(部分內容)

2)氣動熱數據通過數據的動態篩選機制后自動適配出與之對應的UI界面如圖7所示。

圖7 氣動熱數據動態篩選參數設置(部分內容)

3)氣動壓數據通過數據的動態篩選機制后自動適配出與之對應的UI界面如圖8所示。

圖8 氣動壓數據動態篩選參數設置(部分內容)

3 案例分析結果可視化

3.1 實驗環境

所有實驗均在普通PC上進行，硬件環境：處理器為Intel(R) Core(TM) i5-3230M@2.6 GHz，內存為8 G。軟件環境：Windows 10 專業版，IntelliJ IDEA 2019。

3.2 分析結果

本文選取的實驗數據來自于李素循書中[10]及UIUC數據庫[11]關于氣動數據分析的數據集。這些數據集提供了氣動力、熱、壓的樣本數據，共計1 835條。這些數據集涉及到3種類型的氣動數據，使得進行氣動數據可視化分析時刻畫的數據軌跡更加豐富，能更加容易的得到可視化分析結果。具體數據集分布情況如表1所示。

表1 實驗數據集

1)對于氣動力數據的可視化分析：動態選定在不同馬赫數的情況下升力系數CL隨著攻角的變化趨勢(X軸設定為攻角，Y軸設定為升力系數CL取值)，分析結果如圖9所示。

圖9 氣動力數據分析結果

圖9展示了一定的攻角范圍內，即α[-5°, 25°]，在側滑角與滾轉角的實驗條件下，不同升力系數隨著攻角的變化。在攻角小于0°時，所有馬赫數下的升力系數都為負數。在攻角為0°時，所有馬赫數下的升力系數都接近于0。當攻角大于10°時，隨著馬赫數的增大，升力CL系數的斜率趨于恒定。由圖可知氣動力中的升力系數CL在相同攻角條件下具有良好的一致性。升力系數CL在此數據集中當攻角α=25°，馬赫數Ma=1.1時取得最大值，即CLmax=1.73。

2)對于氣動熱數據的可視化分析：動態設置參數篩選氣動熱數據，分析其在不同攻角的情況下熱流q/qref隨著測力點的變化趨勢(X軸設定為測力點，Y軸設定為熱流q/qref取值)，分析結果如圖10所示。

圖10 氣動熱數據分析結果

圖10展示了一定的測力點范圍內，即point[1,20]，在馬赫數Ma=8.04，雷諾數Re=1.13×107的流場條件下，不同熱流隨著測力點的變化。由圖可知氣動熱流分布規律在相同攻角條件下具有良好的一致性。q/qref在此數據集中當攻角α=-5°，測力點為point1時取得最大值，即q/qrefmax=0.896。

3)對于氣動壓數據的可視化分析：動態設置參數篩選氣動壓數據，分析其在不同攻角的情況下壓力系數CP隨著測力點的變化趨勢(X軸設定為測力點，Y軸設定為壓力系數CP取值)，分析結果如圖11所示。

圖11 氣動壓數據分析結果

圖11展示了一定的測力點范圍內，即point[1,20]，在馬赫數Ma=7.79，雷諾數Re=1.04×107的情況下，不同壓力系數CP隨著測力點的變化。有圖可知氣動壓分布規律在氣流與模型的夾角α相同的條件下具有良好的一致性。壓力系數CP在此數據集中當α=0°，測力點為point1時取得最大值，即CPmax=1.82。

通過本系統生成的可視化結果，可以根據研究人員的需求查看單條數據或對比多條數據的變化趨勢，系統通過動態UI組件篩選數據的機制對多類型的氣動數據進行實時的可視化分析和處理，對于空氣動力學的研究有一定的應用價值，可以為相關的研究人員提供分析和決策支持，對飛行器空氣動力模型的建立具有重要的指導意義。

4 結束語

本文針對傳統氣動數據分析方法存在的問題，利用MVVM模式的動態模板和ECharts可視化庫在瀏覽器端構建了動態的可視化UI組件，通過氣動數據類型選擇、數據集選擇、參數設置和過濾條件設置實現了多類型氣動數據的實時篩選及可視化，最后在此基礎上構建了集氣動力、熱、壓三大氣動數據類型為一體的氣動數據可視化分析平臺。驗證結果表明，提出的可視化方法可以在瀏覽器端模擬氣動數據的變化過程，并利用ECharts技術良好的兼容性

在多種瀏覽器上取得良好的可視化效果和用戶體驗，提出的方法在跨平臺、免插件、界面友好等方面較傳統的氣動數據可視化工具具有明顯的優勢。研究人員僅需要設置可視化所需的參數條件就可在瀏覽器端實現多類型氣動數據的可視化繪制，具有靈活、低耗、快速的優點。結合ECharts豐富的人機交互功能，可以直觀的反映單條數據或多條數據的演變趨勢，提出的可視化方法具有通用性，可以廣泛的應用到各類型氣動數據的實時更新和篩選中，實現互聯網環境下氣動數據的實時分析，以此滿足氣動研究人員的需求。

在后續的研究中，還可將動態的可視化UI組件用于多類型氣動數據的多維度分析中。氣動數據的分析在飛機空氣動力學仿真及建模上的應用有著重要的意義，值得進一步深入研究。