CN116302282A - 基于d3的矩阵数据可视化图形生成及数据处理方法 - Google Patents

Abstract

本发明涉及数据处理技术领域，具体涉及基于D3的矩阵数据可视化图形生成及数据处理方法。首先获取预设数据库中三种类型的矩阵数据，构建三元组矩阵数据；根根据矩阵数据调取D3工具库绘制可视化图形、调取D3‑contour工具库绘制矩阵等高线刻度表；融合可视化图形和与矩阵数据对应的对比图像得到前端页面。本发明综合D3.js、D3‑contour、数据可视化操作等技术，生成矩阵数据对应的可视化图形，将可视化图形和数据统计结合起来，解决了矩阵数据可视化工具效率低的问题。

Description

基于D3的矩阵数据可视化图形生成及数据处理方法

技术领域

本发明涉及数据处理技术领域，具体涉及基于D3的矩阵数据可视化图形生成及数据处理方法。

背景技术

随着大数据时代的到来，数据的量级不断增加。对于高维向量、矩阵等数据，可将其转化成图形，查看其分布或进行条目间的对比。在数据分析方式上，基于D3的数据可视化研究是近几年来数据可视化领域研究的热点。由于图形或者图像具有形象、直观、内容丰富等特点，接近人们的认知方式，进而成为数据统计者和海量数据之间不可或缺的多媒体方式。

目前，基于浏览器/服务器模式(Browser/Server,B/S)的浏览器技术是被广泛接受的，因此数据可视化大多数集成于全球广域网(World Wide Web,web)系统中。对于图片或矩阵来说，一般可使用Echarts或Plotly等科学绘图库转化为热力图或散点图等，获得较为直观易懂的显示效果，并且一些基于JavaScript的绘图库可支持鼠标交互与动态查看。但从目前的测试结果来看，Echarts或Plotly等科学绘图库对于矩阵的Heatmap图形转化结果的优化性能较差。对于维数较高的数值矩阵，使用Echarts或Plotly等科学绘图库难以取得理想的效率。当数据渲染成图片之后，一般个人的电脑已经占用了过高的计算资源，对于进一步的交互式数据动态查看等操作势必造成卡顿等不良体验。为了实现较好的交互式图形展示，需要运用底层的可缩放矢量图形(Scalable Vector Graphics,SVG)接口对所显示的图片进行调控。

而在web可视化技术中，与日趋成熟的基于Canvas的数据可视化方式相比，SVG具有更多的可用空间和可视化显示特征，尤其在矩阵数据方面，SVG更容易体现出大量数据下各个节点间的关系，在性能方面SVG相较于普通Canvas技术具有GPU并行运算的优势，目前Canvas技术在渲染一定内容以后，移动帧数会下降到10帧左右，SVG则更容易渲染海量的矩阵数据，性能是Canvas的10倍以上。因此，如果没有对应的将各种形态的数据转化为图形图像的方法，大量信息将淹没在数据的海洋之中，而无法被人们识别和利用。如何发展高效的数据可视化技术成为迫切需要解决的问题。

目前，常见的数据可视化图形生成的方法为：根据多个话题及所对应的多个维度的属性值，绘制图表图形，将各个关键词定位到图表图形中的可用填充位置，该方法针对于大规模矩阵数据进行大规模可视化时，存在着效率低的问题。

发明内容

为了解决对于大规模矩阵数据进行大规模可视化时效率低的问题，本发明的目的在于提供基于D3的矩阵数据可视化图形生成及数据处理方法，所采用的技术方案具体如下：

获取预设数据库中三种类型的矩阵数据，构建三元组矩阵数据；所述矩阵数据包括：矩阵x轴数据、矩阵y轴数据、矩阵数值数据；

根据所述矩阵x轴数据和所述矩阵y轴数据绘制坐标轴；根据所述矩阵数值数据调取D3工具库绘制矩形图形，由多个矩形图形构成可视化图形；根据所述矩阵数值数据调取D3-contour工具库绘制矩阵等高线刻度表；根据可视化图形，获取预设数据库中存储的对比图像，将对比图像与可视化图形融合；

通过调取attachControllers方法修改可视化图形配色、旋转角度及位置；根据鼠标移动轨迹自由框选或者选择矩形、圆形等常见图形进行数据框选；根据可视化图形，对框选数据块或单个数据条目进行数据统计、查看。

优选的，所述获取预设数据库中三种类型的矩阵数据，构建三元组矩阵数据，包括：

从预设数据库中获取三种类型的矩阵数据；

遍历矩阵数值数据中的第一层级，记录当前的矩阵x轴数据所在位数；

根据矩阵y轴数据遍历矩阵数值数据中的第二层级，记录当前矩阵y轴数据所在位数；

合并两层遍历的结果和矩阵数值数据，拼接为三元组矩阵数据；

所述根据所述矩阵x轴数据和所述矩阵y轴数据绘制坐标轴，包括：

在SVG画布上绘制二维坐标轴，二维坐标轴的x轴对应三元组矩阵数据中的矩阵x轴；二维坐标轴的y轴对应三元组矩阵数据中的矩阵y轴；二维坐标轴的x轴作为可视化图形的x轴，二维坐标轴的y轴作为可视化图形的y轴。

优选的，所述根据所述矩阵数值数据调取D3工具库绘制矩形图形，包括：

在SVG画布上定义上下左右四个方向的坐标轴，形成由四条坐标轴围成的矩阵绘制区域，该SVG矩阵绘制区域的宽度和高度分别为：

W＝X*N1；

H＝Y*N2；

其中，W为SVG画布的总宽度；H为SVG画布的总高度；X为单个矩阵元素的宽度；Y为单个矩阵元素的高度；N1为x轴方向的元素数量；N2为y轴方向的元素数量；

定义x轴的宽度和y轴的高度分别为矩阵绘图区域的宽度和高度；

遍历三元组矩阵数据并调用D3将矩阵数值数据渲染至坐标轴上，通过定义的setCRange方法，对已绘制出的数据图形进行颜色填充；根据所述三元组矩阵数据中的矩阵数值数据中的数值大小，依照已定义中的色值列表进行对应数值的颜色填充，绘制矩形图形。

优选的，所述根据所述矩阵数值数据调取D3-contour工具库绘制矩阵等高线刻度表，包括：

通过D3-contour工具库计算等高线刻度的刻度值；

得到所属刻度值列表后调用D3工具库将矩阵等高线刻度表图形绘制到SVG画布上。

优选的，所述将对比图像与可视化图形融合，包括：

从预设数据库中获取与矩阵数据对应的图像文件列表；

通过前端范围选择器从所述图像文件列表选择期望融合的对比图像，将所述对比图像渲染至SVG画布的下方层级；

设置SVG画布的透明度为0.8，定位对比图像左上角与SVG画布的原点位置对齐，得到所述可视化图形与对比图像融合后的前端页面。

优选的，所述得到所属刻度值列表后调用D3工具库将矩阵等高线刻度表图形绘制到SVG画布上，包括：

通过定义的setCRange方法，对已绘制出的刻度值列表图形进行颜色填充；

根据刻度值列表数据中的数值大小，基于已定义中的色值列表进行对应数值的颜色填充。

优选的，所述通过调取attachControllers方法修改可视化图形配色、旋转角度及位置，包括：

通过前端范围选择器调整所述图形旋转角度及位置；

通过前端鼠标移动路径或按钮交互绘制数据选框。

优选的，所述通过前端范围选择器调整所述图形旋转角度及位置，包括：

根据getInnerTransform方法内部定义的getControlsRaw方法将前端范围选择器的数值缓存至controls变量中；根据setAdjustablePosition方法将controls变量中的图形旋转角度和位置进行调整并渲染至前端页面。

优选的，所述通过前端鼠标移动路径或按钮交互绘制数据选框，包括：

根据ShapeMaker方法内部定义的getPath方法将鼠标点击移动的位置缓存至path变量中；

根据ShapeMaker方法内部定义的data2line方法将所述path变量中的轨迹绘制到所述SVG画布上。

优选的，所述根据可视化图形，对框选数据块或单个数据条目进行数据统计、查看，包括：

通过前端算法根据框选数据块中数据的总数、累加数值、均值、最大值、最小值和密度进行统计，并渲染至前端表格中；

通过鼠标点击获取单个数据条目，对单个数据的x轴坐标、y轴坐标、对应数据值进行统计，并渲染至另一块前端表格中。

本发明实施例至少具有如下有益效果：

本发明综合D3.js、D3-contour、矩阵图生成、矩阵数据处理、数据融合和数据可视化操作等技术，生成数据对应的矩阵的可视化图形，并且将图像和数据统计结合起来，方便用户对数据进行一系列可视化操作。解决了矩阵数据可视化工具效率低的问题，实现了基于D3的矩阵数据高效可视化图形生成及数据处理。通过将矩阵数据定位到图表图形中的可用填充位置，实现了将矩阵和图表图形结合起来的目的，从而实现了矩阵数据的可视化，可以提供更多视觉的信息，帮助用户更有效地获取相关内容。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案和优点，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它附图。

图1为本发明一个实施例所提供的基于D3的矩阵数据可视化图形生成及数据处理方法的方法流程图；

图2为本发明一个实施例所提供的绘制可视化图形的步骤流程图；

图3为本发明一个实施例所提供的融合对比图像和可视化图形的步骤流程图；

图4为本发明一个实施例所提供的矩阵数据渲染的示意图；

图5为本发明一个实施例所提供的系统架构框图。

具体实施方式

为了更进一步阐述本发明为达成预定发明目的所采取的技术手段及功效，以下结合附图及较佳实施例，对依据本发明提出的基于D3的矩阵数据可视化图形生成及数据处理方法，其具体实施方式、结构、特征及其功效，详细说明如下。在下述说明中，不同的“一个实施例”或“另一个实施例”指的不一定是同一实施例。此外，一或多个实施例中的特定特征、结构或特点可由任何合适形式组合。

除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。

本发明实施例提供了基于D3的矩阵数据可视化图形生成及数据处理方法的具体实施方法，该方法适用于可视化图形生成及数据处理场景。为了解决根据多个话题及所对应的多个维度的属性值，绘制图表图形，将各个关键词定位到图表图形中的可用填充位置，该方法针对于大规模矩阵数据进行大规模可视化时，存在着效率低的问题。本发明通过D3.js、D3-contour、矩阵图生成、矩阵数据处理、数据融合和数据可视化操作等技术，生成数据对应的矩阵的可视化图形，并且将图像和数据统计结合起来，方便用户对数据进行一系列可视化操作。

下面结合附图具体的说明本发明所提供的基于D3的矩阵数据可视化图形生成及数据处理方法的具体方案。

请参阅图1，其示出了本发明一个实施例提供的基于D3的矩阵数据可视化图形生成及数据处理方法的步骤流程图，该方法包括以下步骤：

步骤S100，获取预设数据库中三种类型的矩阵数据，构建三元组矩阵数据；所述矩阵数据包括：矩阵x轴数据、矩阵y轴数据、矩阵数值数据。

从预设数据库中获取三种类型的矩阵数据；其中，矩阵数据的类型包括：矩阵x轴数据、矩阵y轴数据、矩阵数值数据；该预设数据库为待生成可视化图形的数据库。

遍历矩阵数值数据中的第一层级，记录当前的矩阵x轴数据所在位数；同时根据矩阵y轴数据遍历矩阵数值数据中的第二层级，记录当前矩阵y轴数据所在位数；合并两层遍历的结果和矩阵数值数据这三种类型数据，也即将两次遍历的结果和矩阵数值数据合并成三元组，拼接为三元组矩阵数据。需要说明的是，矩阵数值数据是指在矩阵中的数值。

步骤S200，根据所述矩阵x轴数据和所述矩阵y轴数据绘制坐标轴；根据所述矩阵数值数据调取D3工具库绘制矩形图形，由多个矩形图形构成可视化图形；根据所述矩阵数值数据调取D3-contour工具库绘制矩阵等高线刻度表；根据可视化图形，获取预设数据库中存储的对比图像，将对比图像与可视化图形融合。

根据预设数据库中的矩阵数据进行可视化图形的绘制。

请参阅图2，绘制可视化图形的步骤，具体的：

步骤S201，在SVG画布上绘制二维坐标轴。

二维坐标轴的x轴对应三元组矩阵数据中的矩阵x轴，二维坐标轴的y轴对应三元组矩阵数据中的矩阵y轴，也即二维坐标轴的x轴数据对应三元组矩阵数据中的矩阵x轴数据，二维坐标轴的y轴数据对应三元组矩阵数据中的矩阵y轴数据。二维坐标轴的x轴即为可视化图形的x轴，二维坐标轴的y轴即为可视化图形的y轴。

在此基础上，根据矩阵x轴数据和矩阵y轴数据绘制坐标轴，具体的：

首先定义SVG画布的长宽，画布的长宽值是可变的，但是显示区域固定，如果数据过于庞大可以拖动滚动条来进行矩形图形查看。此外，为了使可视化图形看着更加美观，对画布又增加了边距的留白，定义PixelFixer_paddings这个长度为4的数组，设定SVG画布外边框左下右上四处的留白比例。

在SVG画布上，根据所述三元组数据，调取makeAxes()方法，根据数据中的x轴和y轴数据定义上下左右四个方向的坐标轴，形成由四条坐标轴围成的矩阵绘制区域，该SVG矩阵绘制区域的宽度和高度分别为：

W＝X*N1；

H＝Y*N2；

其中，W为SVG画布的总宽度；H为SVG画布的总高度；X为单个矩阵元素的宽度；Y为单个矩阵元素的高度；N1为x轴方向的元素数量；N2为y轴方向的元素数量；

进一步的，定义x轴的宽度和y轴的高度分别为矩阵绘制区域的宽度和高度。

进一步的，遍历三元组矩阵数据并调用D3工具库将三元组矩阵数据中矩阵数值数据渲染至坐标轴上。然后通过定义的setCRange方法，对已绘制出的数据图形进行颜色填充；根据所述三元组矩阵数据中的矩阵数值数据中的数值大小，依照已定义中的色值列表进行对应数值的颜色填充。

请参阅图4，为矩阵数据渲染示意图。需要说明的是，图4为本发明一个示例，优选采用热力图作为图表图形来说明本发明的一种实施方式。然而在实际应用中或在其他实施例中，并不限于采用热力图，其他采用条形图、柱形图等等图表图形的实施方式也属于本发明的保护范围之内，只是因为图表图形类型不同，展示的效果也不尽相同，矩形图形的填充方式也不尽相同，但均能够实现本发明的矩阵数据可视化的目的。

根据矩阵数值数据调取D3-contour工具库绘制矩阵等高线刻度表，具体的：

通过D3-contour工具库计算等高线刻度的刻度值；

得到所属刻度值列表后调用D3工具库将矩阵等高线刻度表图形绘制到SVG画布上。其中还包括：通过定义的setCRange方法，对已绘制出的刻度值列表图形进行颜色填充；根据刻度值列表数据中的数值大小，基于已定义中的色值列表进行对应数值的颜色填充。

步骤S202，在SVG画布上绘制矩形图形。

进一步的，根据矩阵数值数据调取D3工具库绘制可视化图形，具体的：

根据三元组矩阵数据，调取data2fig()方法，将矩阵行列坐标对应到可视化图形的像素坐标，并得到像素坐标数据；

根据像素坐标数据，调取HeatUp()方法，根据PixelFixer_dx,PixelFixer_dy单个矩阵元素的宽和高，在SVG画布上绘制成x*y个分块的矩形图形，也即x*y个矩形SVG图形，根据坐标位置排列成为SVG可视化图形集合，其中每个矩形图形所代表的值为三元组矩阵数据中的矩阵数值数据，由x*y个分块的矩形图形构成可视化图形。

步骤S203，将不同数值的矩形图形根据已有颜色列表填充对应的颜色，生成最终的可视化图形。

遍历三元组矩阵数据并调用D3工具库将矩阵数值数据渲染至坐标轴上之后，通过定义的setCRange方法，对已绘制出的数据图形进行颜色填充；根据三元组矩阵数据中的矩阵数值数据中的数值大小，依照已定义中的色值列表进行对应数值的颜色填充。

需要说明的是，根据可视化图形，将不同数值的可视化图形根据已有的颜色列表填充对应的颜色；这里定义列表cRangeDefault作为默认颜色列表，通过map()方法将三元组矩阵数据里的矩阵数值遍历出来，对比颜色列表区间，使用d3.scaleLinear()函数将对应区间的矩形图形染色，最终得到填充好颜色的最终的可视化图形。需要说明的是，该颜色列表即为色值列表。

在得到可视化图形后，叠加对比图像，得到叠加后的前端页面。

请参阅图3，融合对比图像和可视化图形的步骤，具体的：

步骤S210，在SVG画布下方叠加对比图像。

具体的：从预设数据库中获取矩阵数据对应的图像文件列表，具体的：从预设数据库中提取与该矩阵数据对应的图像文件，并将其以列表形式展示在前端下拉选框中。通过前端范围选择器从图像文件列表选择期望融合的对比图像，将对比图像渲染至SVG画布的下方层级，具体的：通过下拉选框，选择需要对比查看的对比图像，通过前端数据流的双向绑定，将对比图像绑定至前端组件中，并将其与SVG画布叠放在一起，图像前端组件位于SVG画布下方。

设置SVG画布的透明度为0.8，定位对比图像左上角与SVG画布的原点位置对齐，得到可视化图形与对比图像融合后的融合图像，该融合图像即为前端页面。

步骤S220，调整对比图像位置、大小、伸缩比例，使对比图像与可视化图形对应。

通过定义的setAdjustablePosition()方法，内部使用javascript原生方法操作DOM，调整对比图像的位置、大小、伸缩比例，通过调整后可以让对比图像与SVG画布上的可视化图形叠加在一起，方便对比查看。这里的叠加在一起，也即融合在一起。

步骤S300，通过调取attachControllers方法修改可视化图形配色、旋转角度及位置；根据鼠标移动轨迹自由框选或者选择矩形、圆形等常见图形进行数据框选；根据可视化图形，对框选数据块或单个数据条目进行数据统计、查看。

通过前端范围选择器调整对比图像的旋转角度及位置。具体的：根据getInnerTransform方法内部定义的getControlsRaw方法将前端范围选择器的数值缓存至controls变量中；根据setAdjustablePosition方法将controls变量中的图形旋转角度和位置进行调整并渲染至前端页面。

进一步的，对可视化图形进行数据框选，对数据框选得到的框选数据块或单个数据条目进行数据统计、查看的步骤，具体的：

通过前端鼠标移动路径或按钮交互绘制数据选框，也即根据鼠标移动轨迹自由框选或选择矩形、圆形等常见图形对可视化图形进行数据框选；对数据框选得到的框选数据块或单个数据条目进行数据统计、查看的方法，具体的：

根据ShapeMaker方法内部定义的getPath方法将鼠标点击移动的位置缓存至path变量中；

根据ShapeMaker方法内部定义的data2line方法将path变量中的轨迹绘制到SVG画布上，进行数据框选。通过定义的ShapeMaker操作类，实现了在可视化图形中框选局部区域的功能，使用内部定义的pathNew()方法，可在可视化图形上增加新的选择区域。

调取initiateDraw()方法，让前端网页开始允许鼠标绘制选框；

根据initiateDraw()方法中定义了getMouse()工具函数，用于将浏览器检测到的鼠标的位置转化为SVG图形对应的像素坐标。

调取proceedDraw()方法，根据上述鼠标轨迹像素坐标在绘制图形中增加新的点；

根据proceedDraw()方法中还定义了data2line()工具函数，使鼠标移动轨迹的坐标转化为SVG的path对象，同时将框选的所有矩阵数据值存入全局变量marker.drawer中。

根据全局变量marker.drawer，通过调取定义的统计、计算方法，对已框选数据进行统计、计算，并且展示在前端表格中进行查看。其中，定义的统计、计算方法为：

通过前端算法根据框选数据块中数据的总数、累加数值、均值、最大值、最小值和密度进行统计，并渲染至前端表格中；

通过鼠标点击获取单个数据条目，对单个数据的x轴坐标和y轴坐标所对应数据值进行统计，并渲染至另一块前端表格中。为了更方便理解，请参阅图5，图5为本发明的系统架构框图。

综上所述，本发明涉及数据处理技术领域。该方法综合D3.js、D3-contour、矩阵图生成、矩阵数据处理、数据融合和数据可视化操作等技术，生成数据对应的矩阵的可视化图形，并且将图像和数据统计结合起来，方便用户对数据进行一系列可视化操作。通过本发明，解决了矩阵数据可视化工具效率低的问题，实现了基于D3的矩阵数据高效可视化图形生成及数据处理。

需要说明的是：上述本发明实施例先后顺序仅仅为了描述，不代表实施例的优劣。在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。

Claims (10)

1.基于D3的矩阵数据可视化图形生成及数据处理方法，其特征在于，该方法包括以下步骤：

获取预设数据库中三种类型的矩阵数据，构建三元组矩阵数据；所述矩阵数据包括：矩阵x轴数据、矩阵y轴数据、矩阵数值数据；

根据所述矩阵x轴数据和所述矩阵y轴数据绘制坐标轴；根据所述矩阵数值数据调取D3工具库绘制矩形图形，由多个矩形图形构成可视化图形；根据所述矩阵数值数据调取D3-contour工具库绘制矩阵等高线刻度表；根据可视化图形，获取预设数据库中存储的对比图像，将对比图像与可视化图形融合；

通过调取attachControllers方法修改可视化图形配色、旋转角度及位置；根据鼠标移动轨迹自由框选或者选择矩形、圆形等常见图形进行数据框选；根据可视化图形，对框选数据块或单个数据条目进行数据统计、查看。

2.根据权利要求1所述的基于D3的矩阵数据可视化图形生成及数据处理方法，其特征在于，所述获取预设数据库中三种类型的矩阵数据，构建三元组矩阵数据，包括：

从预设数据库中获取三种类型的矩阵数据；

遍历矩阵数值数据中的第一层级，记录当前的矩阵x轴数据所在位数；

根据矩阵y轴数据遍历矩阵数值数据中的第二层级，记录当前矩阵y轴数据所在位数；

合并两层遍历的结果和矩阵数值数据，拼接为三元组矩阵数据；

所述根据所述矩阵x轴数据和所述矩阵y轴数据绘制坐标轴，包括：

在SVG画布上绘制二维坐标轴，二维坐标轴的x轴对应三元组矩阵数据中的矩阵x轴；二维坐标轴的y轴对应三元组矩阵数据中的矩阵y轴；二维坐标轴的x轴作为可视化图形的x轴，二维坐标轴的y轴作为可视化图形的y轴。

3.根据权利要求1所述的基于D3的矩阵数据可视化图形生成及数据处理方法，其特征在于，所述根据所述矩阵数值数据调取D3工具库绘制矩形图形，包括：

在SVG画布上定义上下左右四个方向的坐标轴，形成由四条坐标轴围成的矩阵绘制区域，该SVG矩阵绘制区域的宽度和高度分别为：

W＝X*N1；

H＝Y*N2；

其中，W为SVG画布的总宽度；H为SVG画布的总高度；X为单个矩阵元素的宽度；Y为单个矩阵元素的高度；N1为x轴方向的元素数量；N2为y轴方向的元素数量；

定义x轴的宽度和y轴的高度分别为矩阵绘图区域的宽度和高度；

遍历三元组矩阵数据并调用D3将矩阵数值数据渲染至坐标轴上，通过定义的setCRange方法，对已绘制出的数据图形进行颜色填充；根据所述三元组矩阵数据中的矩阵数值数据中的数值大小，依照已定义中的色值列表进行对应数值的颜色填充，绘制矩形图形。

4.根据权利要求1所述的基于D3的矩阵数据可视化图形生成及数据处理方法，其特征在于，所述根据所述矩阵数值数据调取D3-contour工具库绘制矩阵等高线刻度表，包括：

通过D3-contour工具库计算等高线刻度的刻度值；

得到所属刻度值列表后调用D3工具库将矩阵等高线刻度表图形绘制到SVG画布上。

5.根据权利要求1所述的基于D3的矩阵数据可视化图形生成及数据处理方法，其特征在于，所述将对比图像与可视化图形融合，包括：

从预设数据库中获取与矩阵数据对应的图像文件列表；

通过前端范围选择器从所述图像文件列表选择期望融合的对比图像，将所述对比图像渲染至SVG画布的下方层级；

设置SVG画布的透明度为0.8，定位对比图像左上角与SVG画布的原点位置对齐，得到所述可视化图形与对比图像融合后的前端页面。

6.根据权利要求4所述的基于D3的矩阵数据可视化图形生成及数据处理方法，其特征在于，所述得到所属刻度值列表后调用D3工具库将矩阵等高线刻度表图形绘制到SVG画布上，包括：

通过定义的setCRange方法，对已绘制出的刻度值列表图形进行颜色填充；

根据刻度值列表数据中的数值大小，基于已定义中的色值列表进行对应数值的颜色填充。

7.根据权利要求1所述的基于D3的矩阵数据可视化图形生成及数据处理方法，其特征在于，所述通过调取attachControllers方法修改可视化图形配色、旋转角度及位置，包括：

通过前端范围选择器调整所述图形旋转角度及位置；

通过前端鼠标移动路径或按钮交互绘制数据选框。

8.根据权利要求7所述的基于D3的矩阵数据可视化图形生成及数据处理方法，其特征在于，所述通过前端范围选择器调整所述图形旋转角度及位置，包括：

根据getInnerTransform方法内部定义的getControlsRaw方法将前端范围选择器的数值缓存至controls变量中；根据setAdjustablePosition方法将controls变量中的图形旋转角度和位置进行调整并渲染至前端页面。

9.根据权利要求7所述的基于D3的矩阵数据可视化图形生成及数据处理方法，其特征在于，所述通过前端鼠标移动路径或按钮交互绘制数据选框，包括：

根据ShapeMaker方法内部定义的getPath方法将鼠标点击移动的位置缓存至path变量中；

根据ShapeMaker方法内部定义的data2line方法将所述path变量中的轨迹绘制到所述SVG画布上。

10.根据权利要求1所述的基于D3的矩阵数据可视化图形生成及数据处理方法，其特征在于，所述根据可视化图形，对框选数据块或单个数据条目进行数据统计、查看，包括：

通过前端算法根据框选数据块中数据的总数、累加数值、均值、最大值、最小值和密度进行统计，并渲染至前端表格中；

通过鼠标点击获取单个数据条目，对单个数据的x轴坐标、y轴坐标、对应数据值进行统计，并渲染至另一块前端表格中。

Images