一种基于antv的资产网络流量拓扑图可视化方法
技术领域
1.本发明涉及网络拓扑技术领域，具体地说，涉及一种基于antv的资产网络流量拓扑图可视化方法。
背景技术：
2.近年来，在云安全领域，使用拓扑图来描述云上资产的网络流量数据愈发广泛。常用且比较成熟的有两种方案：第一种，直接一次性在客户端平铺显示所有资产及网络流量数据，对于少量数据不失为一种完美方案，但对于超大规模资源节点及关系数据会存在严重性能问题。第二种，采用分层技术，首先要求数据库能够存储基于资源某种特性提取的上层父节点的网络流量关系，但本身上层父节点与子节点并不存在网络流量关系，若由服务器端虚构数据并存储，将耗费极大的内存及数据传输损耗，且云上资产的网络流量及其复杂、变化极快，若想尽可能全局描述云上资产网络流量，分层显示无法满足需求。现有技术通过对资源数量的限定，将同类型的节点浓缩为虚拟符号，鼠标停留虚拟符号时，能提示浓缩的节点名称及监控信息，解决了拓扑图一次性渲染大规模资产数据的问题，但普通的符号并不能体现资产间的层级关系，且并没有设计网络流量的展示及虚拟方法。
技术实现要素：
3.本发明针对上述拓扑图中普通的符号并不能体现资产间的层级关系的问题，提出一种基于antv的资产网络流量拓扑图可视化方法；该方法首先根据从服务器获取的资产数据生成的真实节点，并获取资产网络流量数据；其次分析并整合真实边数据，根据资产属性相同的真实边数据生成虚拟节点，根据真实边数据构建虚拟节点和虚拟边；然后利用antv/g6渲染所述真实边数据和所述虚拟边数据；最后展开和收起所述虚拟节点，动态更新资产网络流量拓扑图画布元素，从源头上限制了在画布中渲染的元素数量，提升了资产网络流量拓扑图的绘制速率。
4.本发明具体实现内容如下：一种基于antv的资产网络流量拓扑图可视化方法，具体包括以下步骤：步骤1：获取真实节点的真实边数据；所述真实节点为根据从服务器获取的资产数据生成的节点；所述真实边数据为与服务器获取的资产数据存在网络流量关系的边的资产网络流量数据；步骤2：分析并整合所述真实边数据，根据所述真实边数据构建虚拟节点和虚拟边；步骤3：利用antv/g6渲染所述真实边数据和所述虚拟边数据；步骤4：展开和收起所述虚拟节点，动态更新资产网络流量拓扑图画布元素。
5.为了更好地实现本发明，进一步地，所述步骤2具体包括以下步骤：步骤21：获取所述真实节点的资产属性，从源节点出发将所述资产属性的值相同的所述真实节点生成一个虚拟节点，并将所述资产属性的值相同的真实节点作为所述虚拟
节点的子节点；所述源节点用于指示所述网络流量的流出节点；步骤22：创建第一数组allnodes和第二数组alledges；所述第一数组allnodes用于存储真实节点和虚拟节点；所述第二数组alledges用于真实边和虚拟边；步骤23：循环遍历所述资产网络流量数据，判断所述源节点是否存在设定的资产属性a；步骤24：根据从服务器获取的资产数据生成真实节点，根据资产属性a的值生成虚拟节点，将真实节点和虚拟节点存储至第一数组allnodes；步骤25：根据所述真实节点和所述虚拟节点生成真实边和虚拟边，并将所述真实边和所述虚拟边存储至第二数组alledges。
6.为了更好地实现本发明，进一步地，步骤21中所述资产属性包括资产类型、资产命名空间。
7.为了更好地实现本发明，进一步地，步骤22中所述第一数组allnodes的节点字段包括节点id字段、name字段、parent_id字段、new字段，is_real_node字段、节点类型type字段；所述id字段，用于指示当前节点id；所述name字段，用于指示当前节点名称；所述parent_id字段，用于指示父节点属性；所述new字段，用于指示当前节点是否为画布新渲染的节点，便于区分；所述is_real_node字段，用于指示当前节点是否为真实节点；所述第二数组alledges的边字段包括source字段、target字段、count字段、is_real_edge字段；所述source字段，用于指示源节点id；所述target字段，用于指示目标节点id；所述count字段，用于指示网络流量大小，即边大小；所述is_real_edge字段，用于指示当前边是否为真实边。
8.为了更好地实现本发明，进一步地，若存在资产属性a，所述步骤24的具体操作为：首先将所述源节点的资产属性a的值赋值为val1，根据val1生成虚拟节点，并将所述虚拟节点的parent_id字段设置为空；其次，根据所述源节点生成真实节点，并将所述真实节点的parent_id字段设置为val1；然后，根据目标节点生成真实节点，若所述目标节点存在所述资产属性a，且所述资产属性a的值为val2，将所述目标节点的parent_id字段设置为val2，根据val2生成虚拟节点，并将所述虚拟节点的parent_id字段设置为空；最后将生成的真实节点和虚拟节点存储至第一数组allnodes；其中，所述目标节点用于指示网络流量的流入节点。
9.为了更好地实现本发明，进一步地，若存在资产属性a，所述步骤25的具体操作为：首先构建第一源节点到第一目标节点的第一真实边，并构建所述第一源节点的第一虚拟节点到所述第一目标节点的第一虚拟边，判断所述第二数组alledges中是否存在所述第一虚拟边，若存在，根据所述第一虚拟边修改所述第二数组alledges中所述第一虚拟边的大小；其次，构建所述第一源节点到第二目标节点的第二真实边，构建所述第一源节点的第一虚拟节点到所述第二目标节点的第二虚拟边，判断所述第二数组alledges中是否存在所述第
二虚拟边，若存在，根据所述第二虚拟边修改所述第二数组alledges中所述第二虚拟边的大小；然后，构建所述第一源节点到第二源节点的第二虚拟节点的第三虚拟边，判断所述第二数组alledges中是否存在所述第三虚拟边，若存在，根据所述第三虚拟边修改所述第二数组alledges中所述第三虚拟边的大小；最后，构建所述第一源节点的第一虚拟节点到第二目标节点的第二虚拟节点的第四虚拟边，判断所述第二数组alledges中是否存在所述第四虚拟边，若存在，根据所述第四虚拟边修改所述第二数组alledges中所述第四虚拟边的大小。
10.为了更好地实现本发明，进一步地，若不存在资产属性a，所述步骤24的具体操作为：首先根据源节点生成真实节点，并将所述真实节点的parent_id字段设置为空；其次根据目标节点生成真实节点，若目标节点存在资产属性a，且所述资产属性a的值为val3，将所述目标节点的parent_id字段设置为val3，并根据val3生成虚拟节点，并将所述虚拟节点的parent_id字段设置为空；最后将生成的真实节点和虚拟节点存储至第一数组allnodes；为了更好地实现本发明，进一步地，若不存在资产属性a，所述步骤25的具体操作为：首先构建第二源节点到不存在资产属性a的第一目标节点的第三真实边；然后构建所述第二源节点到存在资产属性a到第二目标节点的第四真实边；最后构建所述第二源节点到存在资产属性a的第二目标节点的第二虚拟节点的第五虚拟边，判断所述第二数组alledges中是否存在所述第五虚拟边，若存在，根据所述第五虚拟边修改所述第二数组alledges中所述第五虚拟边的大小。
11.为了更好地实现本发明，进一步地，所述步骤3具体包括以下步骤：步骤31：设定拓扑图容器div元素，并利用g6.graph（）方法实例化拓扑图，并设置基本属性；步骤32：构建第三数组tempnodes和第四数组tempedges；从所述第一数组allnodes中过滤parent_id字段为空的节点，并放入所述第三数组tempnodes中，从所述第二数组alledges中过滤源节点和目标节点的parent_id字段均为空的边，并放入所述第四数组tempedges中；其中，所述第三数组用于画布渲染的节点，所述第四数组用于画布渲染的边；为了更好地实现本发明，进一步地，步骤4中所述展开虚拟节点具体包括以下步骤：步骤41a：记录虚拟节点a的位置；步骤42a：利用graph.removeitem（）方法移除虚拟节点a；步骤43a：更新当前画布中所有节点的new字段，遍历所述第一数组allnodes，将父节点为虚拟节点a的所有子节点存储至所述第三数组tempnodes，并设置new字段为true；遍历所述第二数组alledges，将子节点与当前画布遗留节点相关的边存储至所述第四数组tempedges。
12.步骤44a：利用graph.layout（）方法完成画布原始更新。
13.为了更好地实现本发明，进一步地，步骤4中所述收起虚拟节点具体包括以下步骤：步骤42a：将当前点击节点的父节点属性作为虚拟节点b，并存储至所述第四数组tempnodes，将所述虚拟节点b的new字段设置为true；
步骤42b：遍历所述第三数组tempnodes，删除父节点属性为虚拟节点b的子节点；步骤42c：遍历所述第二数组alledges，将所有子节点与当前画布遗留节点相关的边存储至所述第四数组tempedges。
14.步骤42d：利用graph.layout（）方法完成画布原始更新。
15.本发明具有以下有益效果：（1）本发明根据资产属性构造虚拟节点和虚拟边的方法，直接从源头上限制了在画布中渲染的元素数量，提升了资产网络流量拓扑图的绘制速率及用户体验。
16.（2）本发明基于资产某种特性提取的上层父节点的网络流量关系，直接减少了数据的存储，加快了数据的传输速率。
附图说明
17.图1为本发明实施例提供的限制资产数量方法的流程示意图；图2为本发明实施例提供的基于antv的资产网络流量拓扑图可视化方法的流程示意框图；图3为本发明实施例提供的资产网络流量拓扑图示意图。
具体实施方式
18.为了更清楚地说明本发明实施例的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，应当理解，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例，因此不应被看作是对保护范围的限定。基于本发明中的实施例，本领域普通技术工作人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
19.在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“设置”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；也可以是直接相连，也可以是通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。
20.本技术实施例中涉及的专业术语及英文缩写对应的完整英文解释如下：antv/g6：一种简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化j9九游会真人的解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。
21.近年来，在云安全领域，使用拓扑图来描述云上资产的网络流量数据愈发广泛。常用且比较成熟的有两种方案：第一种，直接一次性在客户端平铺显示所有资产及网络流量数据，对于少量数据不失为一种完美方案，但对于超大规模资源节点及关系数据会存在严重性能问题。第二种，采用分层技术，首先要求数据库能够存储基于资源某种特性提取的上层父节点的网络流量关系，但本身上层父节点与子节点并不存在网络流量关系，若由服务器端虚构数据并存储，将耗费极大的内存及数据传输损耗，且云上资产的网络流量及其复杂、变化极快，若想尽可能全局描述云上资产网络流量，分层显示无法满足需求。
22.为解决使用拓扑图展示超大规模资产网络流量性能问题，及无法尽可能全局描述
资产网络流量的问题，通过限制资产数量的方式，解决了大规模资产一次性显示问题，该j9九游会真人的解决方案具体为：如图1所示，统计单元s301，用于统计虚拟化平台拓扑结构中的资源节点数量，所述资源节点包括集群节点、物理机节点和虚拟机节点；第一显示单元s302，用于如果所述资源节点数量小于或等于第一配置量s1，则将拓扑结构中的所有资源节点全部呈现在拓扑图中；第二显示单元s303，用于如果所述资源节点数量大于所述第一配置量s1但小于或等于第二配置量s2，则将拓扑结构中的虚拟机节点缩略为第一符号呈现在拓扑图中，其他资源节点 正常呈现在拓扑图中；第三显示单元s304，用于如果所述资源节点数量大于所述第二配置量s2，则将拓扑结构 中的虚拟机节点缩略为第一符号、物理机节点缩略为第二符号呈现在拓扑图中，集群节点正常呈现在拓扑图中。
23.通过对资源数量的限定，将同类型的节点浓缩为虚拟符号，鼠标停留虚拟符号时，能提示浓缩的节点名称及监控信息，解决了拓扑图一次性渲染大规模资产数据的问题，但普通的符号并不能体现资产间的层级关系，且该方案并没有设计网络流量的展示及虚拟方法。
24.实施例1：本实施例一种基于antv的资产网络流量拓扑图可视化方法，如图2所示，该方法具体包括以下步骤。
25.步骤1：获取真实节点的真实边数据。
26.其中，所述真实节点为从服务器获取的资产数据生成的节点；所述真实边数据为与服务器获取的资产数据存在网络流量关系的边的资产网络流量数据。
27.步骤2：分析并整合所述真实边数据，根据所述真实节点的资产属性构建虚拟节点和虚拟边。
28.进一步地，所述步骤2具体包括以下步骤。
29.步骤21：获取所述真实节点的资产属性，从源节点出发将所述资产属性的值相同的真实节点生成一个虚拟节点，并将所述资产属性的值相同的真实节点作为所述虚拟节点的子节点。
30.其中，所述源节点用于指示所述网络流量的流出节点；所述资产属性包括资产类型、资产命名空间。
31.步骤22：创建第一数组allnodes和第二数组alledges；所述第一数组allnodes用于存储真实节点和虚拟节点；所述第二数组alledges用于真实边和虚拟边。
32.其中，所述第一数组allnodes的节点字段包括节点id字段、name字段、parent_id字段、new字段，is_real_node字段、节点类型type字段；所述id字段，用于指示当前节点id；所述name字段，用于指示当前节点名称；所述parent_id字段，用于指示父节点属性；所述new字段，用于指示当前节点是否为画布新渲染的节点，便于区分；所述is_real_node字段，用于指示当前节点是否为真实节点。
33.所述第二数组alledges的边字段包括source字段、target字段、count字段、is_real_edge字段；所述source字段，用于指示源节点id；所述target字段，用于指示目标节点id；所述count字段，用于指示网络流量大小，即边大小；所述is_real_edge字段，用于指示当前边是否为真实边。
34.步骤23：循环遍历所述资产网络流量数据，判断所述源节点是否存在设定的资产属性a。
35.步骤24：根据从服务器获取的资产数据生成真实节点，根据资产属性a的值生成虚拟节点，将真实节点和虚拟节点存储至第一数组allnodes。
36.步骤25：根据所述真实节点和所述虚拟节点生成真实边和虚拟边，并将所述真实边和所述虚拟边存储至第二数组alledges。
37.示例性地，若存在资产属性a，所述步骤24的具体操作为：首先将所述源节点的资产属性a的值赋值为val1，根据val1生成虚拟节点，并将所述虚拟节点的parent_id字段设置为空；其次，根据所述源节点生成真实节点，并将所述真实节点的parent_id字段设置为val1；然后，根据目标节点生成真实节点，若所述目标节点存在所述资产属性a，且所述资产属性a的值为val2，将所述目标节点的parent_id字段设置为val2，根据val2生成虚拟节点，并将所述虚拟节点的parent_id字段设置为空；最后将生成的真实节点和虚拟节点存储至第一数组allnodes。
38.其中，所述目标节点用于指示网络流量的流入节点。
39.示例性地，若存在资产属性a，所述步骤25的具体操作为：首先构建第一源节点到第一目标节点的第一真实边，并构建所述第一源节点的第一虚拟节点到所述第一目标节点的第一虚拟边，判断所述第二数组alledges中是否存在所述第一虚拟边，若存在，根据所述第一虚拟边修改所述第二数组alledges中所述第一虚拟边的大小；其次，构建所述第一源节点到第二目标节点的第二真实边，构建所述第一源节点的第一虚拟节点到所述第二目标节点的第二虚拟边，判断所述第二数组alledges中是否存在所述第二虚拟边，若存在，根据所述第二虚拟边修改所述第二数组alledges中所述第二虚拟边的大小；然后，构建所述第一源节点到第二源节点的第二虚拟节点的第三虚拟边，判断所述第二数组alledges中是否存在所述第三虚拟边，若存在，根据所述第三虚拟边修改所述第二数组alledges中所述第三虚拟边的大小；最后，构建所述第一源节点的第一虚拟节点到第二目标节点的第二虚拟节点的第四虚拟边，判断所述第二数组alledges中是否存在所述第四虚拟边，若存在，根据所述第四虚拟边修改所述第二数组alledges中所述第四虚拟边的大小。
40.示例性地，若不存在资产属性a，所述步骤24中所述根据所述真实节点和所述虚拟节点生成真实边和虚拟边，并将所述真实边和所述虚拟边存储至第二数组alledges的具体操作为：首先根据源节点生成真实节点，并将所述真实节点的parent_id字段设置为空；其次根据目标节点生成真实节点，若目标节点存在资产属性a，且所述资产属性a的值为val3，将所述目标节点的parent_id字段设置为val3，并根据val3生成虚拟节点，并将所述虚拟节点的parent_id字段设置为空；最后将生成的真实节点和虚拟节点存储至第一数组allnodes；
示例性地，若不存在资产属性a，所述步骤25的具体操作为：首先构建第二源节点到不存在资产属性a的第一目标节点的第三真实边；然后构建所述第二源节点到存在资产属性a到第二目标节点的第四真实边；最后构建所述第二源节点到存在资产属性a的第二目标节点的第二虚拟节点的第五虚拟边，判断所述第二数组alledges中是否存在所述第五虚拟边，若存在，根据所述第五虚拟边修改所述第二数组alledges中所述第五虚拟边的大小。
41.步骤3：利用antv/g6渲染真实边数据和虚拟边数据，得到资产网络流量拓扑图。
42.所述步骤3具体包括以下步骤：步骤31：设定资产网络流量拓扑图容器div元素，并利用g6.graph（）方法实例化拓扑图，并设置基本属性；步骤32：构建第三数组tempnodes和第四数组tempedges；从所述第一数组allnodes中过滤parent_id字段为空的节点，并放入所述第三数组tempnodes中，从所述第二数组alledges中过滤源节点和目标节点的parent_id字段均为空的边，并放入所述第四数组tempedges中。
43.其中，所述第三数组用于画布渲染的节点，所述第四数组用于画布渲染的边。
44.步骤4：展开和收起虚拟节点，动态更新资产网络流量拓扑图的画布元素。
45.所述步骤4展开虚拟节点具体包括以下步骤：步骤41a：记录虚拟节点a的位置。
46.步骤42a：利用graph.removeitem（）方法移除虚拟节点a。
47.步骤43a：更新当前画布中所有节点的new字段，遍历所述第一数组allnodes，将父节点为虚拟节点a的所有子节点存储至所述第三数组tempnodes，并设置new字段为true；遍历所述第二数组alledges，将子节点与当前画布遗留节点相关的边存储至所述第四数组tempedges。
48.步骤44a：利用graph.layout（）方法完成资产网络流量拓扑图画布原始更新。
49.所述步骤4收起虚拟节点具体包括以下步骤：步骤41b：将当前点击节点的父节点属性作为虚拟节点b，并存储至所述第四数组tempnodes，将所述虚拟节点b的new字段设置为true。
50.步骤42b：遍历所述第三数组tempnodes，删除父节点属性为虚拟节点b的子节点。
51.步骤43b：遍历所述第二数组alledges，将所有子节点与当前画布遗留节点相关的边存储至所述第四数组tempedges。
52.步骤44b：利用graph.layout（）方法完成资产网络流量拓扑图画布原始更新。
53.工作原理：本实施例首先根据从服务器获取的资产数据生成的真实节点，并获取资产网络流量数据；其次分析并整合真实边数据，根据资产属性相同的真实边数据生成虚拟节点，根据真实边数据构建虚拟节点和虚拟边；然后利用antv/g6渲染所述真实边数据和所述虚拟边数据；最后展开和收起所述虚拟节点，动态更新资产网络流量拓扑图画布元素，从源头上限制了在画布中渲染的元素数量，提升了资产网络流量拓扑图的绘制速率。
54.实施例2：本实施例在上述实施例1的基础上，如图3所示，以一个具体的实施例进行详细说明。
55.步骤1：从服务器端一次性获取所有资产网络流量数据。
56.其中，资产统称为真实节点，网络流量统称真实边。
57.步骤2：数据分析和整合；步骤21：数据分析，任一组网络流量数据必须包括源节点src、目标节点dst、protocalstatis字段，源节点src描述流量的流出节点，目标节点dst描述流量的流入节点，protocalstatis字段描述详细的网络流量数据。
58.真实节点包含属性a。属性a的取值，实则与真实节点间存在主从包含关系，所以将属性a的所有取值提取为虚拟节点。如图3所示，pod1节点、pod2节点的属性a取值相同，为ns1，将ns1生成虚拟节点，pod1节点和pod2节点则为ns1的子节点。
59.属性a可以是根据资产特点构造的，如资产的类型、资产同属于某个命名空间等。
60.若pod2节点与service1节点存在网络流量关系，如图3边（3），则提取的虚拟节点ns1节点与service1节点间需虚拟网络流量关系，如图3边（4），流量大小相等；ns1与ns2间需虚拟网络流量关系，如图3边（6），且流量大小是ns1中所有指向ns2中真实节点的流量大小之和。
61.根据以上分析，图3中边（1）-（9）包含了所有虚拟边及真实边情况。我们只需生成从源节点出发的所有真实边及虚拟边，即可囊括所有的边情况。
62.步骤22：进行数据整合，声明两个数组，第一数组allnodes，用于存储虚拟节点及真实节点，节点字段必须包括id字段；name字段；parent_id字段，用于指示父节点属性；new字段，用于标记是否为画布新渲染的节点，便于用户区分；is_real_node字段，用于指示是否是真实节点；type字段，用于指示节点类型；第二数组alledges，用于存储虚拟节点及虚拟边，边字段必须包括source字段，用于指示源节点id；target字段，用于指示目标节点id；count字段，用于指示网络流量大小，统称边大小；is_real_edge字段，用于指示是否是真实边；循环遍历服务器返回的资产网络流量数据，判定源节点是否存在属性a，分为2种情况：若源节点是存在属性a的真实节点：步骤s1：生成真实节点及虚拟节点。设源节点属性a取值val1，将val1生成虚拟节点，parent_id字段设置为空；将源节点生成真实节点，其父节点属性设置为val1；将目标节点生成真实节点，若目标节点存在属性a，且取值为val2，设置目标节点的父节点属性为val2，将val2生成虚拟节点，设置父节点属性为空。将生成的节点存入第一数组allnodes。
63.步骤s2：生成真实边及虚拟边，并存入第二数组alledges。可能存在的情况：(a）构建源节点到目标节点不存在属性a的边，如图3边（1）；(b）构建虚拟节点，即源节点的父节点到目标节点不存在属性a的边，如图3边（2）。若存在（a)，一定存在（b)，需先判断第二数组alledges是否存在此虚拟边，若存在，只需修改边大小；(c）构建源节点到目标节点存在属性a的边，如图3边（3）；(d）构建虚拟节点，即源节点的父节点到目标节点存在属性a的边，如图3边（4）。若存在（c)，一定存在（d)，需先判断第二数组alledges是否存在此虚拟边，若存在，只需修改边大小；(e）构建源节点到虚拟节点，即目标节点的父节点的边，如图3边（5）。若存在（c)，
一定存在（e)，需先判断第二数组alledges是否存在此虚拟边，若存在，只需修改边大小；(f）构建虚拟节点到虚拟节点，即源节点的父节点到目标节点的父节点的边，如图3边（6）。若存在（c)，一定存在（f)，需先判断第二数组alledges是否存在此虚拟边，若存在，只需修改边大小。
64.若源节点是不存在属性a的真实节点：步骤s1：将源节点生成真实节点，父节点属性设置为空；将目标节点生成真实节点，若目标节点存在属性a，且取值为val3，设置目标节点的父节点属性为val3，将val3生成虚拟节点，设置父节点属性为空。将生成的节点存入第一数组allnodes。
65.步骤s2：生成真实边及虚拟边，并存入第二数组alledges。
66.可能存在的情况：(g）构建源节点到目标节点不存在属性a的边，如图3边（7）；(h）构建源节点到目标节点存在属性a的边，如图3边（8）；(i）构建源节点到虚拟节点即目标节点的父节点的边，如图3边（9）。若（h）存在，(i）一定存在，需先判断第二数组alledges是否存在此虚拟边，若存在，只需修改边大小。
67.步骤3：使用antv g6渲染初始化数据。
68.步骤31：准备拓扑图容器div元素，采用g6.graph实例化拓扑图，并设置其基本属性。
69.步骤32：声明两个数组，第三数组tempnodes，用于画布渲染的节点，第四数组tempedges用于画布渲染的边；从第一数组allnodes中过滤父节点属性为空的节点放入第三数组tempnodes中，从第二数组alledges中过滤源节点和目标节点的父节点属性均为空的边放入第四数组tempedges中。
70.虚拟节点、真实节点、虚拟边、真实边、边大小即线条粗细，均使用不同的样式显示，帮助用户从感知上区分。
71.步骤33：通过graph.data加载数据，graph.render渲染数据。
72.其中，如图3所示，本实施例中的pod2节点为第一源节点，internet节点为第一目标节点，node1为第二源节点，service1为第二目标节点；边（1）为第一真实边，边（2）为第一虚拟边，边（3）为第二真实边，边（4）为第二虚拟边，边（5）为第三虚拟边，边（6）为第四虚拟边，边（7）为第三真实边，边（8）为第四真实边，边（9）为第五虚拟边。
73.步骤4：虚拟节点展开及收起，动态更新画布元素。
74.步骤41：展开虚拟节点a：步骤41a：记录虚拟节点a的位置，以便于其子节点围绕此位置展开。
75.步骤41b：使用graph.removeitem移除虚拟节点a。
76.步骤41c：更新画布所有节点的new字段，遍历第一数组allnodes，将其父节点为虚拟节点a的所有子节点放入第三数组tempnodes，并设置其new字段为true；遍历第二数组alledges，将所有子节点与现有画布遗留节点相关的边放入第四数组tempedges。
77.设置常量limit，如果画布中所有节点数量大于limit，需要收起除节点a以外的所有虚拟节点，从而限制大规模节点一次性在画布中绘制。
78.步骤41d：通过graph.layout（）方法完成画布原始更新。
79.步骤42：收起虚拟节点a。
80.步骤42a：当前点击节点的父节点属性即为虚拟节点b，放入第三数组tempnodes，设置其new字段为true。
81.步骤42b：遍历第三数组tempnodes，删除父节点属性为虚拟节点b的子节点。
82.步骤42c：遍历时而数组alledges，将所有子节点与现有画布遗留节点相关的边放入第四数组tempedges。
83.步骤42d：通过graph.layout（）方法完成画布原始更新。
84.工作原理：本实施例使用构造虚拟节点及虚拟边的方法，直接从源头上限制了在画布中渲染的元素数量，提升了云上资产网络流量拓扑图的绘制速率及用户体验。
85.当服务器返回大规模资产网络流量时，其真实节点属性a的取值越少，具备属性a的节点越多，最终生成的虚拟节点就会越少，边也会越少，数据整合越集中，且支持limit灵活可配置，这样提高了拓扑图的绘制速率。
86.若数据库无法存储基于资产某种特性提取的上层父节点的网络流量关系时，使用此方法效果更佳，这样直接减少了数据的存储及加快了数据的传输速率。
87.虚拟节点、真实节点、虚拟边、真实边、边大小，均使用不同的样式显示，帮助用户从感知上区分，提升用户体验。
88.本实施例的其他部分与上述实施例1相同，故不再赘述。
89.以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化，均落入本发明的保护范围之内。