气动数据可视化系统的设计与实现

钟佳伶，黎茂锋，黄 俊，刘志勤，陈立伟

(西南科技大学 计算机科学与技术学院，四川 绵阳 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组件用于多类型气动数据的多维度分析中。气动数据的分析在飞机空气动力学仿真及建模上的应用有着重要的意义，值得进一步深入研究。