CN107038176B - 网络图页面渲染方法、装置及设备 - Google Patents

Abstract

本申请是关于网络图页面渲染方法、装置及设备，所述方法包括：获取各逻辑节点的位置信息；获取预设的观察窗口的位置信息；根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点；根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系；在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点。本申请既可以实现网络图的全局展示，又可以在逻辑节点更新时实现实时动态更新，并且能清晰的展示网络结构。

Description

网络图页面渲染方法、装置及设备

技术领域

本申请涉及网络通信技术领域，尤其涉及网络图页面渲染方法、装置及设备。

背景技术

随着互联网、移动互联网的快速发展，人们习惯于打开浏览器来完成各种需求，如逛淘宝、玩微博，还可以基于浏览器查看公司的报表或财务报告等。

特别的，有一类任务是在WEB页面上对网络图进行可视化分析。这里的网络图可以是资金网络图、媒介网络图、人际关系网络图等。网络图通常包括逻辑节点和逻辑节点之间相连的边。比如说，对于资金网络图，各逻辑节点可以表示各个账户，各条边可以表示各账户之间的关系，这种关系可以包括账户中资金的转移。当网络图的规模较大时，例如网络图至少包括上万的逻辑节点和边时，则计算布局并可视化是非常消耗CPU计算的，而浏览器是本机单机环境，计算能力有限，于是大规模复杂网络图的渲染方法就显得极其重要，否则需要很长时间才能完成网络图页面的渲染。

目前，针对大规模的网络图页面，可以只展示子图，如只展示一度关系、二度关系，这类方法需要不断的去探索逻辑节点，无法展示全局的结构，例如Twitter的人际关系图展示。另外，也可以基于离线机群先计算好布局，然后在浏览器中显示等，例如可以先计算好各逻辑节点的位置，再导成pdf或图谱，然后在浏览器中显示，本质是一种静态图的展示方法，无法实现实时更新。

发明内容

本申请提供网络图页面渲染方法、装置及设备，以解决现有技术无法全局展示以及实施更新的问题。

根据本申请实施例的第一方面，提供一种网络图页面渲染方法，包括：

获取各逻辑节点的位置信息；

获取预设的观察窗口的位置信息；

根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点；

根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系；

在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点。

根据本申请实施例的第二方面，提供一种网络图页面渲染装置，所述装置包括：

第一位置信息获取单元，用于获取各逻辑节点的位置信息；

第二位置信息获取单元，用于获取预设的观察窗口的位置信息；

目标逻辑节点确定单元，用于根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点；

渲染单元，用于根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系；在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点。

根据本申请实施例的第三方面，提供一种客户端设备，包括：

处理器；用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取各逻辑节点的位置信息；

获取预设的观察窗口的位置信息；

根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点；

根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系；

在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点。

应用本申请实施例渲染网络图页面时，可以根据各逻辑节点的位置信息在第一预设位置渲染用于显示各逻辑节点的位置关系的缩略图，从而实现网络图的全局展示，并且由于缩略图中仅展示各逻辑节点的位置关系，因此可以提高渲染效率，同时，通过设置观察窗口的方式仅渲染观察窗口内目标逻辑节点，实现对网络图的部分展示，可以在逻辑节点更新时实现实时动态更新，并且能清晰的展示网络结构。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1A为其中一种网络图的示意图。

图1B为本申请网络图页面渲染方法的一个实施例流程图。

图1C为本申请四叉树建立示意图。

图2A为本申请网络图页面渲染方法的另一个实施例流程图。

图2B为本申请根据一示例性实施例示出的一种网络图页面示意图。

图3为本申请网络图页面渲染装置所在客户端设备的一种硬件结构图。

图4为本申请网络图页面渲染装置的一个实施例框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

通过浏览器可以显示带有网络图的页面，网络图中可以包括逻辑节点和边，逻辑节点可以由多个页面元素组成。例如，对于资金网络图，各逻辑节点可以表示各个账户，各条边可以表示各账户之间的关系。一个逻辑节点可以包括一个圆圈图形、logo、相应的数据信息等。各逻辑节点之间可以通过边连接。如图1A所示，图1A为其中一种网络图的示意图。在该网络图中，包括逻辑节点A、B、C、D。逻辑节点A可以包括页面元素：图标、圆圈、xxxxxxxxx等，逻辑节点B可以包括页面元素：sim、圆圈、xxxxxxxxxxxxxxx等，逻辑节点C可以包括页面元素：ip、圆圈、xxx.xx.xxx.xxx等，逻辑节点D可以包括页面元素：mac、圆圈、xx:xx:xx:xx:xx:xx等。可以理解的是，图1A仅为了对网络图进行示例，所以示出的是比较简单的网络图。

针对网络图，可按照逻辑节点的数量将网络图大致分为小规模的网络图、中规模的网络图、大规模的网络图。小规模的网络图可以是逻辑节点的数量少于100个的网络图，中规模的网络图可以是逻辑节点的数量在100到1000范围的网络图，大规模的网络图可以是逻辑节点的数量在1000以上的网络图。可以理解的是，各种不同规模的网络图所包含的逻辑节点的数量可以根据需求设定。

用户通过浏览器访问具有网络图的页面时，加载模块可以发出页面资源请求以获取HTML或XML文档数据，在资源加载过程中会调用平台模块提供的网络处理功能。加载模块将获取到的字符流形式的HTML或者XML文档交给HTML或者XML解析器，解析器对数据进行解析，并构建生成一棵DOM树，在生成DOM树节点的同时，渲染模块会同时构建一棵与DOM数据对应渲染树，然后根据渲染树利用迭代布局算法对网络图中各逻辑节点进行布局，获得所有逻辑节点的位置信息及各逻辑节点之间的连接关系。

相关技术中，在获得所有逻辑节点的位置信息及各逻辑节点之间的连接关系后，可以直接根据逻辑节点的位置信息及各逻辑节点之间的连接关系对所有逻辑节点进行渲染，获得网络图。然而，针对大规模的网络图，采用上述方法对大规模的网络图进行渲染时，会因为逻辑节点的数量较大导致渲染的信息较多，从而影响浏览器的渲染速度。基于此，相关技术中，为了展示大规模的网络图，可以只展示子图，如只展示一度关系、二度关系，这类方法需要不断的去探索逻辑节点，无法展示全局的结构。另外，也可以根据各逻辑节点的位置信息导成pdf或图谱，然后在浏览器中显示，这种方式无法实现实时更新。

为了避免无法全局展示以及无法实时更新的缺陷，本申请提供一种网络图页面渲染方法，如图1B所示，图1B为本申请网络图页面渲染方法的一个实施例流程图，该方法可以应用在客户端设备上，包括以下步骤101至步骤104：

在步骤101中，获取各逻辑节点的位置信息。

本申请所指逻辑节点的位置信息可以是在进行增删改等操作后，终端采用迭代布局算法确定逻辑节点的位置信息。其中，增删改操作可以是在打开网络图页面后用户对页面上的网络图进行的增删改操作，以便用户通过浏览器对网络图页面进行可视化分析。增操作也可以是用户通过浏览器访问网络图页面时加载逻辑节点的操作。

为了实现既可以全局展示又可以实时更新，本申请可以引入OpenGL 3D渲染引擎的世界坐标系/窗口模式思想。例如，可以通过世界坐标系中的坐标表示各个逻辑节点的位置信息，世界坐标系中包括所有逻辑节点的位置信息集合，当逻辑节点的位置信息发生变化时，更新世界坐标系中该逻辑节点的位置信息。在世界坐标系中可以预先设置一个范围，即预设范围，例如10000像素*10000像素。每个逻辑节点可以以js(JavaScript)对象存储，其中位置信息可以利用x、y字段来保存，可以用js对象存储逻辑节点之间的连接关系，例如，可以同时存储源逻辑节点和目标逻辑节点，则表示源逻辑节点和目标逻辑节点存在连接关系。

在迭代布局算法中，由于每次迭代计算时都会更新逻辑节点的位置信息，因此本申请可以在每次迭代计算获得的逻辑节点的位置信息后，获取逻辑节点的位置信息，然后执行步骤102至104，本申请也可以获取完整迭代过程中最后一次迭代计算时获得的逻辑节点的位置信息，然后执行步骤102至104。

获取各逻辑节点的位置信息步骤还可以是确定各逻辑节点的位置信息步骤。针对获取各逻辑节点的位置信息的步骤，可以采用相关技术中的迭代布局算法获得逻辑节点的位置信息。例如，以访问网络图页面为例进行说明。当访问网络图页面时，先将加载的逻辑节点随机分布位置信息，然后开始迭代计算，判断逻辑节点是否满足预设收敛条件，在不满足预设收敛条件时，根据重力、引力以及各个逻辑节点间的斥力计算每个逻辑节点的移动步长，并根据移动步长更新各逻辑节点的位置信息，并返回继续进行收敛条件的判断，直到收敛，本次迭代结束。

另外，为了降低计算量，本申请还提供另一种获取各逻辑节点的位置信息的方法，该方法可以包括步骤A1至A4所描述的过程：

A1：根据每个逻辑节点的重力以及相邻逻辑节点间的引力确定相应逻辑节点的第一移动步长。

其中，第一移动步长是指逻辑节点移动的距离。第一移动步长可以包括第一横坐标移动步长和第二纵坐标移动步长。

在一个可选的实现方式中，可以采用下述公式计算某逻辑节点受重力影响下的横坐标移动位移：

d_x＝(c_x-n_x)*gravity

其中，d_x表示该迭代周期中逻辑节点受重力影响下的横坐标移动位移，c_x表示该世界坐标系中预设范围的重心的横坐标位置，n_x表示该逻辑节点在横轴的位置，gravity是预设的用于控制重力强度的参数。

同理，可以采用下述公式计算某逻辑节点受重力影响下的纵坐标移动位移：

d_y＝(c_y-n_y)*gravity

其中，d_y表示该迭代周期中逻辑节点受重力影响下的纵坐标移动位移，c_y表示该世界坐标系中预设范围的重心的纵坐标位置，n_y表示该逻辑节点在纵轴的位置，gravity是预设的用于控制重力强度的参数。

另外，可以采用下述公式计算逻辑节点1受相邻逻辑节点2的引力影响下的横坐标移动位移：

k＝rubberStrength*(dist-min_dist)

其中，d_x表示在该迭代周期中逻辑节点1受逻辑节点2的引力影响下的横坐标移动位移，rubberStrength表示预设的用于控制引力强度的参数，min_dist表示预设的用于控制两逻辑节点的最短距离的参数，dist表示逻辑节点1和逻辑节点2间的距离，n1_x表示逻辑节点1当前在横轴的位置，n2_x表示逻辑节点2当前在横轴的位置。

可以理解的是，逻辑节点1受相邻逻辑节点2的引力影响下的纵坐标移动位移与横坐标移动位移计算方法相似，在此不再一一赘述。

在确定逻辑节点受重力影响下的横/纵坐标移动位移、逻辑节点受相邻逻辑节点的引力影响下的横/纵坐标移动位移后，可以根据重力影响下的横坐标移动位移与引力影响下的横坐标移动位移加权求和获得第一横坐标移动步长，可以根据重力影响下的纵坐标移动位移与引力影响下的纵坐标移动位移加权求和获得第一纵坐标移动步长。

A2：根据每个逻辑节点的当前位置信息建立四叉树；根据四叉树中非叶子节点下逻辑节点的重心位置计算所述非叶子节点的重心位置，根据各非叶子节点的重心位置计算每个逻辑节点受其他逻辑节点斥力影响下的第二移动步长。

其中，逻辑节点可以分布在二维空间中，利用四叉树索引技术对空间进行递归索引，可以形成一棵四叉树。四叉树索引是一种基础的空间索引算法，可以用于物理引擎里计算两两点的碰撞模拟等游戏领域。它的基础原理是四等分一个二维空间，得到四个矩形区域，再对每个矩形进行四等分，并递归下去直至所有的点都被索引。

如图1C中，图1C为本申请四叉树建立示意图的例子。在图1C中列举了分布在二维空间中的8个逻辑节点A～H。四等分该二维空间，可以得到四个矩形区域，当一个区域内的逻辑节点数量大于1时，则对该区域进行四等分，直至每个区域内的逻辑节点的数量不大于1，然后根据划分好的区域建立四叉树。其中，将一个区域(为了方便区分不同区域将该区域称为父区域)划分为四等分区域(为了方便区分不同区域将该区域称为子区域)时，在四叉树中用非叶子节点表示该父区域，用非叶子节点下的子节点表示该子区域，当子区域无需等分时，该子节点为非叶子节点下的叶子节点；当子区域需等分时，该子节点为非叶子节点下的非叶子节点，以此类推。

可见，在四叉树中，叶子节点可以是真实存在的逻辑节点，叶子节点也可以为空，但是逻辑节点通常是叶子节点。非叶子节点也可以称为群组节点，对应二维空间的模块区域。非叶子节点下的子节点有可能是表示逻辑节点的叶子节点，也有可能是空叶子节点，还有可能是下一层次的非叶子节点。

关于根据四叉树中非叶子节点下逻辑节点的重心位置计算所述非叶子节点的重心位置，可以根据非叶子节点下的子节点的重心位置确定该非叶子节点的重心位置。例如，递归四叉树中各非叶子节点，当该非叶子节点下的所有子节点都有重心位置时，将子节点的重心位置加权求和获得该非叶子节点的重心位置，该非叶子节点访问结束；如果该非叶子节点下的某个子节点没有重心位置，则采用上述方式计算该子节点的重心位置。其中，子节点可以是叶子节点，也可以是该非叶子节点下的非叶子节点。叶子节点为逻辑节点时，叶子节点的重心位置为逻辑节点的重心位置，叶子节点不是逻辑节点时，叶子节点的重心位置为空。

关于根据各非叶子节点的重心位置计算每个逻辑节点受其他逻辑节点斥力影响下的第二移动步长，可以采用下述方式：

针对当前逻辑节点，从四叉树的根节点起进行遍历；当遍历到非叶子节点时，计算当前逻辑节点的位置与非叶子节点的重心位置的距离，当所述距离大于预设距离时，计算所述当前逻辑节点受非叶子节点斥力影响下的移动位移，并停止遍历所述非叶子节点下的子节点，当所述距离小于预设距离时，继续遍历所述非叶子节点下的子节点；当遍历到逻辑节点时，计算所述当前逻辑节点受该逻辑节点斥力影响下的移动位移；根据各所述移动位移确定所述当前逻辑节点受其他逻辑节点斥力影响下的第二移动步长。

其中，对每个逻辑节点均采用上述方法计算其受其他逻辑节点斥力影响下的第二移动步长，以便在每次迭代过程中计算每个逻辑节点的目标移动步长。

以图1C为例进行说明，当前逻辑节点为A时，从四叉树的根节点起进行遍历；当遍历到A时，则跳过，当遍历到非叶子节点ne1时，计算当前逻辑节点A的位置与非叶子节点ne1的重心位置的距离，当距离大于预设距离时，计算当前逻辑节点A受非叶子节点ne1斥力影响下的移动位移，并停止遍历非叶子节点ne1下的子节点，即不再遍历节点nw2、ne2、sw2、se2、nw4、ne4、sw4、se4。当距离小于预设距离时，继续遍历非叶子节点ne1下的子节点，例如子节点nw2，由于子节点nw2为非叶子节点，则计算当前逻辑节点A的位置与非叶子节点nw2的重心位置的距离，当距离大于预设距离时，计算当前逻辑节点A受非叶子节点nw2斥力影响下的移动位移，并停止遍历所述非叶子节点nw2下的子节点，即不再遍历节点nw4、ne4、sw4、se4。当距离小于预设距离时，继续遍历非叶子节点nw2下的子节点，当遍历到子节点nw4，由于子节点nw4为非逻辑节点的叶子节点，则跳过，遍历到子节点ne4时，由于子节点ne4为逻辑节点B，则计算当前逻辑节点A受该逻辑节点B斥力影响下的移动位移。采用上述方法遍历完四叉树后，根据各移动位移确定当前逻辑节点A受其他逻辑节点斥力影响下的第二移动步长。

由于在当前逻辑节点的位置与非叶子节点的重心位置的距离大于预设距离时，计算的是当前逻辑节点受该非叶子节点斥力影响下的移动位移，而不再计算当前逻辑节点受该非叶子节点下子节点斥力影响下的移动位移，从而将计算斥力的复杂度从O(n²)下降到O(nlgn)，降低了计算量。

在一个可选的实现方式中，移动位移可以包括横坐标移动位移和纵坐标移动位移，因此，可以采用下述公式计算当前逻辑节点受非叶子节点斥力影响下的横坐标移动位移：

其中，d_x表示在该迭代周期中逻辑节点受非叶子节点斥力影响下的横坐标移动位移，n1_x表示逻辑节点当前的横坐标位置，n2_x表示非叶子节点的重心位置中的横坐标位置，dist表示逻辑节点的位置与非叶子节点的重心位置的距离，repulsionStrength表示预设的用于控制斥力强度的参数。

可以理解的是，当前逻辑节点受非叶子节点斥力影响下的纵坐标移动位移与横坐标移动位移计算方法相似，在此不再一一赘述。

A3：根据所述第一移动步长和所述第二移动步长确定每个逻辑节点的目标移动步长。

可以理解的是，根据所述第一移动步长和所述第二移动步长确定每个逻辑节点的目标移动步长，即根据每个逻辑节点的第一移动步长和第二移动步长确定相应逻辑节点的目标移动步长，以实现对每个逻辑节点均计算目标移动步长。

A4：根据每个逻辑节点的目标移动步长更新逻辑节点的位置信息。

其中，逻辑节点的目标移动步长可以是逻辑节点需要移动的距离或位移，因此，可以根据逻辑节点的目标移动步长更新该逻辑节点的位置信息。

其中，A1至A4是一次迭代计算过程中获取逻辑节点的位置信息的方法，在一个实现方式中，可以只执行一次迭代。在其他实现方式中，可通过迭代条件执行多次迭代。例如，在每次迭代计算过程中，如果所获得的目标移动步长不小于预设值，则重新执行获取各逻辑节点的位置信息的步骤，即继续迭代；如果所获得的所有目标移动步长均小于预设值，则结束迭代。

例如，可以在A1步骤前，判断上一次所获得的目标移动步长是否均小于预设值，若所有目标移动步长均小于预设值，则结束迭代，若存在目标移动步长不小于预设值，则执行A1至A4步骤。

其中，当第一次迭代计算时，逻辑节点的目标移动步长可以默认比预设值大，进行迭代计算；当第N次迭代计算时，逻辑节点的目标移动步长是指上一次迭代计算中获得的该逻辑节点的目标移动步长，N为大于1的整数。

又如，可以在A4步骤后，判断当前所获得的目标移动步长是否小于预设值，若所有目标移动步长均小于预设值，则结束迭代，若存在目标移动步长不小于预设值，则返回继续执行A1至A4步骤。

本实现方式通过建立四叉树，并根据四叉树中非叶子节点下逻辑节点的重心位置计算所述非叶子节点的重心位置，根据各非叶子节点的重心位置计算每个逻辑节点受其他逻辑节点斥力影响下的第二移动步长，可以降低斥力影响下第二移动步长的计算量。

在步骤102中，获取预设的观察窗口的位置信息。

其中，观察窗口是预先设置的用于确定网络图中目标逻辑节点的窗口，目标逻辑节点是用户期望看到的网络图中的局部信息。观察窗口的大小可以预先设置，也可以根据用户需求设定，观察窗口的大小不大于世界坐标系中预设范围的大小。观察窗口在世界坐标系中的位置可以是预先设置的，例如默认将观察窗口设置在世界坐标系中预设范围的正中央。观察窗口在世界坐标系中的位置也可以是根据用户移动指令确定的，例如，用户可以通过移动观察窗口，从而确定观察窗口在世界坐标系中的位置。为了局部展示网络图，将观察窗口区域内的逻辑节点确定为待展示的目标逻辑节点，仅对网络图中的目标逻辑节点的相关信息进行展示，以实现快速渲染的目的。

针对获取预设的观察窗口的位置信息，可以根据观察窗口大小以及观察窗口在世界坐标系中的位置进行确定。以观察窗口大小及位置是用户设定为例进行说明，经过用户设定后，观察窗口可以是长为1024像素、宽为768像素的一个矩形框，观察窗口在世界坐标系的正中央，从而可以确定观察窗口的位置信息。其中，观察窗口的位置信息是一个位置范围。

在步骤103中，根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点。

在一个可选的实现方式中，在确定各逻辑节点的位置信息和观察窗口的位置信息后，可以分别判断每个逻辑节点的位置信息是否在观察窗口的位置信息的范围内，当逻辑节点的位置信息在观察窗口的位置信息的范围内时，将该逻辑节点确定为目标逻辑节点，否则，可以确定该逻辑节点不是目标逻辑节点。

在另一个可选的实现方式中，为了提高确定目标逻辑节点的效率，可以在根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点之前，根据每个逻辑节点的当前位置信息建立四叉树。

在一个实现方式中，可以是在A4步骤根据每个逻辑节点的目标移动步长更新逻辑节点的位置信息后，根据更新后的每个逻辑节点的当前位置信息建立四叉树，以实现根据该四叉树确定最新的目标逻辑节点。

在另一个实现方式中，由于迭代速度较快，因此，根据每个逻辑节点的当前位置信息建立四叉树可以是A2步骤中建立的四叉树，从而实现在一次迭代计算中仅建立一次四叉树，提高迭代效率。

在确定目标逻辑节点时，可以从所述四叉树的根节点起进行遍历，若节点为逻辑节点且该逻辑节点的位置信息与所述观察窗口所在位置范围存在交集，将该逻辑节点确定为目标逻辑节点，若节点的位置信息与所述观察窗口所在位置范围不存在交集，则停止遍历所述节点下的子节点，对其他节点进行遍历。

其中，观察窗口的位置信息可以是能标识观察窗口的坐标信息，也可以是一个坐标范围。当观察窗口的位置信息为能标识观察窗口的坐标信息时，观察窗口所在位置范围可以根据观察窗口的位置信息确定。当观察窗口的位置信息为一个坐标范围时，该坐标范围即为观察窗口所在位置范围。

例如，可以在从四叉树的根节点起进行遍历时，当节点不是空叶子节点时，可以判断节点的位置信息与观察窗口所在位置范围是否存在交集，若存在交集，则判断该节点是否为逻辑节点，若该节点是逻辑节点，则将该逻辑节点确定为目标逻辑节点，若该节点不是逻辑节点，则继续对该节点的子节点进行遍历；若节点的位置信息与观察窗口所在位置范围不存在交集，则停止遍历所述节点下的子节点，对其他节点进行遍历。可以理解的是，当节点为空叶子节点时，继续对其他节点进行遍历。

其中，上述所提及的节点可以是非叶子节点，也可以是表示逻辑节点的叶子节点，还可以是空叶子节点。当节点为逻辑节点时，节点的位置信息即为逻辑节点的位置信息，当节点为非叶子节点时，节点的位置信息可以为该非叶子节点所对应的二维空间区域范围。当非叶子节点的位置信息与观察窗口的位置信息存在交集时，即表示该非叶子节点下可能存在目标逻辑节点，因此需要对该叶子节点下的子节点进行遍历和判断。

由上述实施例可见，由于在节点的位置信息与观察窗口所在位置范围不存在交集时，停止遍历该节点下的子节点，即舍弃对该节点下子节点的遍历，将时间复杂度由O(n)降低到O(lgn)，可以提高遍历效率，进而提高了确定目标逻辑节点的效率。

在步骤104中，根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系；在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点。

在确定逻辑节点的位置信息以及目标逻辑节点后，可以进行渲染。

其中，第一预设位置可以是屏幕上预先设置的一个位置，例如，可以将屏幕的左上角所在区域设置为第一预设位置。在确定逻辑节点的位置信息后，可以在第一预设位置上渲染用于表示各逻辑节点位置关系的缩略图，由于缩略图仅表示逻辑节点的位置关系，而无需渲染出逻辑节点所有相关的页面元素，因此不仅可以通过缩略图实现全局展示网络图，还可以提高渲染效率。

在一个可选的实现方式中，缩略图中各逻辑节点的位置关系用预设图形的集合表示。

其中，预设图形是为了简化逻辑节点而设置的比较容易绘制的图形，例如预设图形可以是比较容易绘制的一个点。每个逻辑节点对应的预设图形可以相同，也可以不同，为了进一步提高渲染速度，可以将每个逻辑节点对应的预设图形设置为相同，例如均设置为一个点。

可见，通过预设图形表示逻辑节点，在逻辑节点的位置上渲染该预设图形，实现利用预设图形的集合表示各逻辑节点的位置关系，从而无需渲染出逻辑节点对应的所有页面元素，仅需在相应位置渲染代表逻辑节点的预设图形，提高渲染效率。

针对渲染观察窗口，一方面是为了让用户查看在第二预设位置上渲染的信息与全局的网络图的关联关系，另一方面，用户可以通过移动观察窗口查看网络图中其它信息。

针对在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点，第二预设位置可以是屏幕上预先设置的一个位置，例如，当将屏幕的左上角区域设置为第一预设位置时，可以将屏幕的右边区域设置为第二预设位置，从而实现在屏幕的右边展示目标逻辑节点相关信息。

在渲染目标逻辑节点，可以对目标逻辑节点相关的所有页面元素进行渲染，以及对连接逻辑节点的边进行渲染。可以理解的是，在目标逻辑节点的位置信息确定后，浏览器可以根据目标逻辑节点的位置信息确定该目标逻辑节点中页面元素的位置信息，因此可以渲染目标逻辑节点中的页面元素。通过对目标逻辑节点中的页面元素以及连接各目标逻辑节点的边进行渲染，实现展示网络图中观察窗口对应的信息。

由于观察窗口是可移动窗口，因此在接收到观察窗口的移动指令后，可以移动观察窗口，每移动一次观察窗口，会重新对观察窗口以及观察窗口内所包含的目标逻辑节点进行渲染。

可见，在逻辑节点没有更新的情况下，无需重新渲染缩略图，可以在观察窗口移动时，重新渲染移动后的观察窗口和观察窗口对应的新目标逻辑节点。

由上述实施例可见，该实施例可以根据各逻辑节点的位置信息在第一预设位置渲染用于显示各逻辑节点的位置关系的缩略图，从而实现网络图的全局展示，并且由于缩略图中仅展示各逻辑节点的位置关系，因此可以提高渲染效率，同时，通过设置观察窗口的方式仅渲染观察窗口内目标逻辑节点，实现对网络图的部分展示，由于无需导成pdf或图谱，因此可以在逻辑节点更新时实现实时动态更新，并且能清晰的展示网络结构。

基于此，本申请提供一种网络图页面渲染方法的应用实例，如图2A所示，图2A为本申请网络图页面渲染方法的应用实例的流程图，所述方法包括：

在步骤201中，判断是否有新增逻辑节点或删除逻辑节点，若存在新增逻辑节点或删除逻辑节点，进入步骤202，若不存在新增逻辑节点或删除逻辑节点，则进入步骤203。

其中，针对访问网络图页面的情况，加载的逻辑节点均为新增逻辑节点，针对修改网络图页面的情况，增加的逻辑节点为新增逻辑节点，删除的逻辑节点为删除逻辑节点。由于每次迭代过程中可能存在新增逻辑节点或删除逻辑节点，因此每次迭代计算时可以进行逻辑节点是否增删的判断。其中，修改逻辑节点可以理解为同时删除逻辑节点和新增其他逻辑节点。

在步骤202中，当存在新增逻辑节点时，随机赋予该新增逻辑节点的位置信息，并进入步骤203；当存在删除逻辑节点时，删除该逻辑节点，并进入步骤203。

在步骤203中，判断上一次迭代所获得的目标移动步长是否小于预设值，当目标移动步长不小于预设值时，进入步骤204，当所有目标移动步长小于预设值时，结束迭代计算。

在步骤204中，根据每个逻辑节点的重力以及相邻逻辑节点间的引力确定相应逻辑节点的第一移动步长。

在步骤205中，根据每个逻辑节点的当前位置信息建立四叉树；根据四叉树中非叶子节点下逻辑节点的重心位置计算所述非叶子节点的重心位置，根据各非叶子节点的重心位置计算每个逻辑节点受其他逻辑节点斥力影响下的第二移动步长。

在步骤206中，根据所述第一移动步长和所述第二移动步长确定每个逻辑节点的目标移动步长。

在步骤207中，根据每个逻辑节点的目标移动步长更新逻辑节点的位置信息。

在步骤208中，获取预设的观察窗口的位置信息。

在步骤209中，根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点。

在步骤210中，根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系；在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点，并返回步骤201。

可以理解的是，步骤204至步骤207同上述A1至A4相似，步骤208至210与图1A中步骤102至104相似，在此不再一一赘述。

如图2B所示，图2B为本申请根据一示例性实施例示出的一种网络图页面示意图。在示意图中，左上角所在区域为缩略图，在缩略图中展示了网络图的全局信息，右边区域为主体窗口，主题窗口展示了观察窗口内网络的实际结构。

由上述实施例可见，该实施例不仅通过缩略图实现网络图的全局展示，并通过设置观察窗口的方式仅渲染观察窗口内目标逻辑节点对应的相关信息，实现实时动态更新以及清晰展示网络结构，还通过建立四叉树，并根据四叉树中非叶子节点下逻辑节点的重心位置计算所述非叶子节点的重心位置，根据各非叶子节点的重心位置计算每个逻辑节点受其他逻辑节点斥力影响下的第二移动步长，从而降低斥力影响下第二移动步长的计算量。

与本申请网络图页面渲染方法的实施例相对应，本申请还提供了网络图页面渲染装置及客户端设备的实施例。

本申请网络图页面渲染装置的实施例可以应用在安装有浏览器的各种客户端设备上，例如，该客户端设备可以包括手机、平板电脑、PC等。其中，装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在客户端设备的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图3所示，为本申请网络图页面渲染装置所在客户端设备的一种硬件结构图，除了图3所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的客户端设备通常根据该设备的实际功能，还可以包括其他硬件，图3中不再一一示出。

参见图4，为本申请网络图页面渲染装置的一个实施例框图：

该装置包括：第一位置信息获取单元410、第二位置信息获取单元420、目标逻辑节点确定单元430和渲染单元440。

其中，第一位置信息获取单元410，用于获取各逻辑节点的位置信息；

第二位置信息获取单元420，用于获取预设的观察窗口的位置信息；

目标逻辑节点确定单元430，用于根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点；

渲染单元440，用于根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系；在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点。

在一个可选的实现方式中，所述第一位置信息获取单元410包括(图4未示出)：

第一移动步长确定子单元，用于根据每个逻辑节点的重力以及相邻逻辑节点间的引力确定相应逻辑节点的第一移动步长；

四叉树建立子单元，用于根据每个逻辑节点的当前位置信息建立四叉树；

第二移动步长确定子单元，用于根据四叉树中非叶子节点下逻辑节点的重心位置计算所述非叶子节点的重心位置，根据各非叶子节点的重心位置计算每个逻辑节点受其他逻辑节点斥力影响下的第二移动步长；

目标移动步长确定子单元，用于根据所述第一移动步长和所述第二移动步长确定每个逻辑节点的目标移动步长；

位置信息更新子单元，用于根据每个逻辑节点的目标移动步长更新逻辑节点的位置信息。

在另一个可选的实现方式中，所述第一位置信息获取单元410还包括(图4未示出)：

判断子单元，用于当所获得的目标移动步长不小于预设值时，触发所述第一移动步长确定子单元、所述四叉树建立子单元、所述第二移动步长确定子单元、所述目标移动步长确定子单元和所述位置信息更新子单元重新获取各逻辑节点的位置信息。

在另一个可选的实现方式中，所述第二移动步长确定子单元包括(图4未示出)：

移动步长确定模块，用于针对当前逻辑节点，从四叉树的根节点起进行遍历；当遍历到非叶子节点时，计算当前逻辑节点的位置与非叶子节点的重心位置的距离，当所述距离大于预设距离时，计算所述当前逻辑节点受非叶子节点斥力影响下的移动位移，并停止遍历所述非叶子节点下的子节点，当所述距离小于预设距离时，继续遍历所述非叶子节点下的子节点；当遍历到逻辑节点时，计算所述当前逻辑节点受该逻辑节点斥力影响下的移动位移；根据各所述移动位移确定所述当前逻辑节点受其他逻辑节点斥力影响下的第二移动步长。

在另一个可选的实现方式中，所述装置还包括(图4未示出)：

四叉树建立单元，用于根据每个逻辑节点的当前位置信息建立四叉树；

所述目标逻辑节点确定单元包括目标逻辑节点确定子单元，用于从所述四叉树的根节点起进行遍历，若节点为逻辑节点且该逻辑节点的位置信息与所述观察窗口所在位置范围存在交集，将该逻辑节点确定为目标逻辑节点，若节点的位置信息与所述观察窗口所在位置范围不存在交集，则停止遍历所述节点下的子节点，对其他节点进行遍历。

可以理解的是四叉树建立单元与四叉树建立子单元可以是同一个单元，也可以不是同一个单元。

在另一个可选的实现方式中，所述缩略图中各逻辑节点的位置关系用预设图形的集合表示。

基于此，本申请还提供一种客户端设备，包括：

处理器；用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取各逻辑节点的位置信息；

获取预设的观察窗口的位置信息；

根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点；

根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系；

在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点。

上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

由上述实施例可见，可以根据各逻辑节点的位置信息在第一预设位置渲染用于显示各逻辑节点的位置关系的缩略图，从而实现网络图的全局展示，并且由于缩略图中仅展示各逻辑节点的位置关系，因此可以提高渲染效率，同时，通过设置观察窗口的方式仅详细展示观察窗口内目标逻辑节点对应的相关信息，实现对网络图的部分展示，可以在逻辑节点更新时实现实时动态更新，并且能清晰的展示网络结构。

本领域技术人员在考虑说明书及实践这里申请的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未申请的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (11)

1.一种网络图页面渲染方法，其特征在于，所述方法包括：

根据每个逻辑节点的重力以及相邻逻辑节点间的引力确定相应逻辑节点的第一移动步长；根据每个逻辑节点的当前位置信息建立四叉树；根据四叉树中非叶子节点下逻辑节点的重心位置计算所述非叶子节点的重心位置，根据各非叶子节点的重心位置计算每个逻辑节点受其他逻辑节点斥力影响下的第二移动步长；

根据所述第一移动步长和所述第二移动步长确定每个逻辑节点的目标移动步长；

根据每个逻辑节点的目标移动步长获得逻辑节点的位置信息；

获取预设的观察窗口的位置信息；

根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点；

根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系；

在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：如果所获得的目标移动步长不小于预设值，则获取各逻辑节点的位置信息。

3.根据权利要求1所述的方法，其特征在于，所述根据各非叶子节点的重心位置计算每个逻辑节点受其他逻辑节点斥力影响下的第二移动步长，包括：

针对当前逻辑节点，从四叉树的根节点起进行遍历；

当遍历到非叶子节点时，计算当前逻辑节点的位置与非叶子节点的重心位置的距离，当所述距离大于预设距离时，计算所述当前逻辑节点受非叶子节点斥力影响下的移动位移，并停止遍历所述非叶子节点下的子节点，当所述距离小于预设距离时，继续遍历所述非叶子节点下的子节点；

当遍历到逻辑节点时，计算所述当前逻辑节点受该逻辑节点斥力影响下的移动位移；

根据各所述移动位移确定所述当前逻辑节点受其他逻辑节点斥力影响下的第二移动步长。

4.根据权利要求1所述的方法，其特征在于，

所述根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点，包括：

从所述四叉树的根节点起进行遍历，若节点为逻辑节点且该逻辑节点的位置信息与所述观察窗口所在位置范围存在交集，将该逻辑节点确定为目标逻辑节点，若节点的位置信息与所述观察窗口所在位置范围不存在交集，则停止遍历所述节点下的子节点，对其他节点进行遍历。

5.根据权利要求1所述的方法，其特征在于，所述缩略图中各逻辑节点的位置关系用预设图形的集合表示。

6.一种网络图页面渲染装置，其特征在于，所述装置包括：

第一位置信息获取单元，用于根据每个逻辑节点的重力以及相邻逻辑节点间的引力确定相应逻辑节点的第一移动步长；根据每个逻辑节点的当前位置信息建立四叉树；根据四叉树中非叶子节点下逻辑节点的重心位置计算所述非叶子节点的重心位置，根据各非叶子节点的重心位置计算每个逻辑节点受其他逻辑节点斥力影响下的第二移动步长；根据所述第一移动步长和所述第二移动步长确定每个逻辑节点的目标移动步长；根据每个逻辑节点的目标移动步长获得逻辑节点的位置信息；

第二位置信息获取单元，用于获取预设的观察窗口的位置信息；

目标逻辑节点确定单元，用于根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点；

渲染单元，用于根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系，在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点。

7.根据权利要求6所述的装置，其特征在于，所述第一位置信息获取单元还用于当所获得的目标移动步长不小于预设值时，则获取各逻辑节点的位置信息。

8.根据权利要求6所述的装置，其特征在于，所述第一位置信息获取单元，包括：

移动步长确定模块，用于针对当前逻辑节点，从四叉树的根节点起进行遍历；当遍历到非叶子节点时，计算当前逻辑节点的位置与非叶子节点的重心位置的距离，当所述距离大于预设距离时，计算所述当前逻辑节点受非叶子节点斥力影响下的移动位移，并停止遍历所述非叶子节点下的子节点，当所述距离小于预设距离时，继续遍历所述非叶子节点下的子节点；当遍历到逻辑节点时，计算所述当前逻辑节点受该逻辑节点斥力影响下的移动位移；根据各所述移动位移确定所述当前逻辑节点受其他逻辑节点斥力影响下的第二移动步长。

9.根据权利要求6所述的装置，其特征在于

所述目标逻辑节点确定单元包括：

目标逻辑节点确定子单元，用于从所述四叉树的根节点起进行遍历，若节点为逻辑节点且该逻辑节点的位置信息与所述观察窗口所在位置范围存在交集，将该逻辑节点确定为目标逻辑节点，若节点的位置信息与所述观察窗口所在位置范围不存在交集，则停止遍历所述节点下的子节点，对其他节点进行遍历。

10.根据权利要求6所述的装置，其特征在于，所述缩略图中各逻辑节点的位置关系用预设图形的集合表示。

11.一种客户端设备，其特征在于，包括：

处理器；用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为：

根据每个逻辑节点的重力以及相邻逻辑节点间的引力确定相应逻辑节点的第一移动步长；根据每个逻辑节点的当前位置信息建立四叉树；根据四叉树中非叶子节点下逻辑节点的重心位置计算所述非叶子节点的重心位置，根据各非叶子节点的重心位置计算每个逻辑节点受其他逻辑节点斥力影响下的第二移动步长；根据所述第一移动步长和所述第二移动步长确定每个逻辑节点的目标移动步长；根据每个逻辑节点的目标移动步长获得逻辑节点的位置信息；

获取预设的观察窗口的位置信息；

根据所述逻辑节点的位置信息及所述观察窗口的位置信息获得所述观察窗口内所包含的目标逻辑节点；

根据各逻辑节点的位置信息以及观察窗口的位置信息在第一预设位置渲染缩略图和所述观察窗口，所述缩略图用于显示各逻辑节点的位置关系；

在第二预设位置渲染所述观察窗口内所包含的目标逻辑节点。

Images