CN103873277B - 一种分层的网络拓扑可视化方法及系统 - Google Patents

Abstract

本发明公开了一种分层的网络拓扑可视化方法及系统，所述方法包含：101）将浏览器画布分为：背景层、链路层、节点层、拖动层和文本层，并根据数据类型在对应的层进行渲染；102）在各层中进行图形化元素渲染时，把拓扑数据中的背景、链路、节点和文字描述映射为浏览器的图形化元素，同时通过脚本语言为图形化元素注册相应的交互事件；所述各层的渲染具体为：在链路层，根据链路源节点和端节点的相对位置，计算链路的起点和终点的位置，且映射链路对象为页面上的线元素，通过页面上的线元素划线函数渲染网络链路；在拖动层，通过拖放节点来改变拓扑元素的相对位置，当拖动对应的节点时，将在该层实现拖动元素和其相关联元素的重绘。

Description

一种分层的网络拓扑可视化方法及系统

技术领域

本发明涉及IT技术领域，特别涉及一种分层的网络拓扑可视化方法及系统。

背景技术

随着网络技术的发展和业务的增长，网络管理在网络配置发生变化时越来越难做到快速的呈现，而且在出现故障时查找根源也越来越复杂。网络拓扑的可视化把网络拓扑数据以一种直观、图形化的方式呈现给用户，是网络管理系统中比较重要的功能之一。可视化的网络拓扑把复杂的网络清晰的展示给用户，可以快速的查找网元和业务，并能迅速的定位故障源，帮助用户减轻运维负担，降低运维成本。

传统的网络可视化技术基于C/S（client/server）的方式来呈现网络拓扑。这种方式开发难度高，而且受制于必须有客户端。虽然也有使用SVG、VML等Web技术进行基于B/S（browser/server）方式的拓扑呈现，但这些是基于XML的声明式的绘图。这种方式并不能满足复杂绘图操作在性能上的需求，而且大多都需要浏览器安装插件，或存在浏览器端的兼容性问题。HTML5 canvas元素的出现填补了这种不足。随着HTML5标准的推进和浏览器厂商的支持，基于HTML5 canvas来进行Web绘图已经成为现实。开发人员可以使用JavaScript语言在canvas中进行一系列基于命令的图形绘制操作。基于HTML5 canvas的绘图在复杂绘图上操作能力强，性能高，而且大部分手机浏览器都支持HTML5 canvas，可以直接通过手机等移动设备进行访问。

中国第CN101719839A号专利公开了一种AJAX框架下基于VML语言的可视图形化资源配置方法，在这种方法中，通过采用微软IE浏览器的VML技术，结合AJAX的DWR框架来展示网络逻辑拓扑图。中国第CN101751383A号专利公开了一种使用SVG描述网络拓扑的方法，使用SVG的对象元素和LINE元素来表示拓扑图中的节点和连接关系，并通过JavaScript来控制动态呈现。中国第CN101777993A号专利公开了一种拓扑图构造方法和系统，所述方法以MVC架构为基础，以FLEX技术实现，将网络资源抽象为简单的对象即可以构造网络资源的拓扑图。

通过对现有技术和专利的分析，现有的公开技术或者以SVG、VML等基于DOM的方式来实现基于Web的拓扑图渲染，在动态表现能力以及性能上相对较差，或者基于Flash插件来实现，加载时间长，影响用户体验。而且，上述方法都不能对移动设备很好地支持。

发明内容

本发明目的在于，为克服现有技术的上述问题，本发明提供了一种分层的网络拓扑可视化方法及系统。

为实现上述目的，本发明提供了一种分层的网络拓扑可视化方法，所述方法包含：

101）将浏览器画布分为：背景层、链路层、节点层、拖动层和文本层，并根据数据类型在对应的层进行渲染；

102）在各层中进行图形化元素渲染时，把拓扑数据中的背景、链路、节点和文字描述映射为浏览器的图形化元素，同时通过脚本语言为图形化元素注册相应的交互事件；

所述各层的渲染具体为：

102-1）在链路层，根据链路源节点和端节点的相对位置，计算链路的起点和终点的位置，且映射链路对象为页面上的线元素，通过页面上的线元素划线函数渲染网络链路；

102-2）在节点层，映射节点对象为页面上的图片元素，通过HTML5函数绘制节点；

102-3）在拖动层，通过拖放节点来改变拓扑元素的相对位置，当拖动对应的节点时，将在该层实现拖动元素和其相关联元素的重绘；

102-4）在文本层，当鼠标移动到节点和链路时，拓扑图中文字描述信息的显示，将通过新建文本层来进行渲染，在文字描述信息消失后，文本层将进行销毁；

其中，所述各层都通过网元标识查找对应最新的拓扑数据进行渲染；浏览器通过HTML5 WebSocket协议与服务器进行拓扑数据增量更新，数据传递采用JSON格式。

上述步骤102-1）进一步包含：

11）浏览器完成JSON格式的拓扑数据解析，解析出链路层的链路数据，此数据以数组方式给出，数组中每一元素对应一条具体链路；同时解析出节点层的节点数据，此数据以数组方式给出，数组中每一元素对应一个具体节点；

12）获取每一条链路数据，此数据包含链路的起点和终点，起点和终点数据中包含元素标识和元素位置信息；然后根据源节点和目的节点的元素标识，从拓扑数据的节点数据中查找出相应的节点的位置信息；

13）依据步骤12）中获取链路的源节点和目的节点的位置信息，并根据节点相对位置判断，获得链路的源节点和目的节点的相对位置方向；

14）依据步骤13）中获得的链路的源节点和目的节点的相对位置方向，计算链路的起点坐标source′{x:x1,y:y1}和终点坐标target′{x:x2,y:y2}，画出新建的链路；

15）为链路注册mouseover和mouseout事件，并设置链路不可拖放；

16）通过新建一个文本层来实现提示信息的显示；

17）把新建的链路添加到链路层中，调用HTML5 Canvas提供的Draw Line函数完成此链路显示；

18）迭代处理链路数据，完成链路层的显示。

上述步骤14）的网络链路渲染时起点和终点的连接点计算方法为：依据链路的起点和终点相对于画布容器的左上角的坐标把两节点的相对位置分成了左、右、上和下四种方向，具体为：

依据这四种方向的不同，给出了这两个相对位置的节点之间链路的起点和终点位置；其中，起点和终点位置相关数据包括：左上角坐标(x,y)和节点的宽度width和高度height；

针对左、右方向：

如是左情况，链路对应的一端Node1的坐标(x,y)为：x=Node1.x+Node1.width;y=Node1.y/2，链路对应的另一端Node2的坐标(x,y)为：x=Node2.x;y=Node2.y/2；

如是右情况，Node1的坐标(x,y)为：x=Node1.x;y=Node1.y/2，Node2的坐标(x,y)为：x=Node2.x+Node2.width;y=Node2.y/2；

针对上、下方向：

如是上情况，链路对应的一端Node1的坐标(x,y)为：x=Node1.x+Node1.width/2;y=Node1.y+Node1.height，链路对应的另一端Node2的坐标(x,y)：x=Node2.x+Node1.width/2;y=Node2.y；

如是下情况，Node1的坐标(x,y)为：x=Node1.x+Node1.width/2;y=Node1.y，Node2的坐标(x,y)为：x=Node2.x+Node2.width/2;y=Node2.y+Node2.height。

上述步骤102-2）进一步包含：

21）浏览器完成JSON格式的拓扑数据解析，解析出节点层的node数组；

22）在解析出node数组后，获取node的图片链接URL属性，并为其注册回调函数；

23）浏览器加载节点图片，当图片加载完成进入下个步骤；

24）在节点层上画出网络节点，并设置节点可拖动；

25）为节点注册鼠标移动事件mouseover\mouseout和鼠标拖动事件dragmove\dragend；

26）设置节点的提示信息；

27）把节点添加到节点层中，调用HTML5Canvas提供的Draw Image函数实现节点显示；。

28）迭代处理节点数据，完成节点层的显示。

上述mouseover事件首先获取鼠标位置，然后设置tooltip的内容，并设置tooltip可见，mouseout事件更改鼠标样式，并同时设置tooltip隐藏；

dragmove事件新建拖动层，重绘节点和与节点相关联的链路，dragend事件通过WebSocket协议，把节点数据发送给拓扑数据服务器。

基于上述方法本发明还提供了一种分层的网络拓扑可视化系统，所述系统包含：

分层模块，用于将浏览器画布分为但不限于：背景层、链路层、节点层、拖动层和文本层，并根据数据类型在对应的层进行渲染；

渲染模块，用于在各层中进行图形化元素渲染时，把拓扑数据中的背景、链路、节点和文字描述映射为浏览器的图形化元素，同时通过脚本语言为图形化元素注册对应交互事件；

所述渲染模块进一步包含：

链路层渲染子模块，用于根据链路源节点和端节点的相对位置，计算链路的起点和终点的位置，且映射链路对象为HTML5 Line元素，通过HTML5 Canvas提供的draw line函数渲染网络链路；

节点层渲染子模块，用于映射节点对象为HTML5 Image元素，通过HTML5Canvas提供的draw Image函数渲染网络节点；

拖动层渲染子模块，用于通过拖放节点来改变拓扑元素的相对位置，当拖动对应的节点时，将在该层实现拖动元素和其相关联元素的重绘；

文本层渲染子模块，用于当鼠标移动到节点和链路时，拓扑图中文字描述信息的显示，将通过新建文本层来进行渲染，在文字描述信息消失后，文本层将进行销毁；

其中，所述各层都通过网元标识查找对应最新的拓扑数据进行渲染，所述各层进行图形化元素渲染时，通过JavaScript为图形化元素注册交互事件，以实现与拓扑图的交互；且浏览器通过HTML5 WebSocket协议与服务器进行拓扑数据增量更新，数据传递采用JSON格式。

上述链路层渲染子模块进一步包含：

解析单元，用于浏览器完成JSON格式的拓扑数据解析，解析出链路层的link数组；

链路端点相对位置获取单元，用于获取链路数据，并根据链路数据中的source和target获取当前拓扑中的节点位置，即根据source和target中的节点标识Id，从JSON拓扑数据的node数组中查找出相应的节点的location；并根据节点相对位置判断方法，获得source和target的相对位置方向；

链路画出单元，用于依据相对位置获取单元中获得的source和target的相对位置方向，并计算Line的起点source′{x:x1,y:y1}和终点target'{x:x2,y:y2}，画出line；

交互事件建立单元，用于为链路line注册鼠标移动事件mouseover\mouseout，并设置line不可拖放；同时为节点node注册相关鼠标事件mouseover\mouseout和拖放事件dragmove\dragend。

文本显示单元，用于通过新建一个文本层来实现tooltip的显示；

添加单元，用于把line添加到链路层中，实现链路的显示。

上述节点渲染子模块进一步包含：

第二解析单元，浏览器完成JSON格式的拓扑数据解析，解析出节点层的node数组；

回调函数注册单元，用于在解析出node数组后，获取node的图片URL属性，并为其注册回调函数；

加载单元，用于浏览器加载完整的节点图片；

节点画出单元，用于依据节点数组中的节点数据的坐标位置（x，y）和宽width高height设定，迭代画出节点Image；

第二交互事件建立单元，用于为节点注册mouseover、mouseout、dragmove和dragend事件；

设置节点文本单元，通过新建一个文本层来设置节点的提示信息；和显示设置单元，用于把节点添加到节点层中，实现节点的显示。

上述交互事件建立单元的具体操作为：所述mouseover事件首先获取鼠标位置，然后设置tooltip的内容，并设置tooltip可见，mouseout事件更改鼠标样式，并同时设置tooltip隐藏；

dragmove事件新建拖动层，重绘节点和与节点相关联的链路，dragend事件通过WebSocket协议，把节点数据发送给拓扑数据服务器。

本发明的方案基于Web技术实现一种直观、高效、兼容各种浏览器、交互能力强的Web网络拓扑渲染方法，用以解决现有网络拓扑的Web渲染存在的交互能力弱、浏览器兼容性差等问题。

本发明将拓扑图元素按照背景、链路、节点、拖动元素和文本，进行了分层，并对层中的元素进行分别渲染显示，通过各层的叠加实现最终的拓扑图。本发明的各层之间分别渲染。在节点拖动时，只渲染与其直接连接的元素，避免了画布的全部渲染，提高了渲染性能。本发明针对拓扑图链路端点的位置定位，按照节点之间的相对位置计算，并最终确定端点的坐标；本发明通过HTML5的Canvas进行拓扑元素的渲染。总之本发明公开一种分层的网络拓扑可视化方法，本发明的技术方案可以提高网络拓扑的渲染性能和交互能力，增强通过Web浏览器来进行网络管理的用户体验，同时支持通过手机操作。

本发明的有益效果在于：

1．本方法对拓扑数据分层渲染，避免背景层和非关联元素重绘，提高了渲染速度。

2．本方法采用HTML5来实现网络拓扑的可视化，拓扑渲染性能高，出图速度快，交互能力强，用户体验好。同时HTML5 canvas是大部分现代浏览器内置支持的，不需要任何插件，而且对于其他一些浏览器也可以通过JavaScript来进行模拟实现。

3．本方法基于HTML5实现了基于Web的网络拓扑可视化，支持手机和其他一些移动设备来进行访问，实现了对多屏的支持。

4．本方法基于HTML5 WebSocket来实现拓扑数据的更新，实时性强，更利于网管系统中故障信息的及时显示。

附图说明

图1是本发明拓扑数据分层渲染示意图；

图2是本发明网络链路渲染流程图；

图3是本发明网络节点渲染流程图；

图4是本发明网络链路渲染起点和终点的连接点位置图。

具体实施方式

下面结合附图来进行详细说明基于HTML5的拓扑图实现方法。

本发明提供的分层的网络拓扑可视化方法将浏览器画布分为背景层、链路层、节点层、拖动层和文本层，并根据拓扑数据类型在对应的层进行渲染；

在各层进行渲染时，把拓扑数据中的背景、链路、节点和文字描述映射为浏览器的图形化元素，并通过JavaScript为图形化元素注册交互事件，以实现与拓扑图的交互；

在链路层，根据链路源节点和端节点的相对位置，计算链路的起点和终点的位置；

在拖动层，当拖动对应的节点时，将在该层实现拖动元素和其相关联元素的重绘，避免背景层和非关联元素重绘；拖动层只有在响应拖动事件时才会出现，只包含与拖动事件相关联的图形化元素，并且位于各层之上，在拖动事件处理完成后，拖动层将消失，并更新节点层和链路层中的节点和链路。

在文本层，当鼠标移动到节点和链路时，拓扑图中文字描述信息的显示，将通过新建文本层来进行渲染，在文字描述信息消失后，文本层将进行销毁。

另外，层与层之间没有相互依赖，各层都通过网元标识查找对应最新的拓扑数据进行渲染。

所述方法可以基于HTML5元素进行实现：

1、画布分层中的每一层基于HTML5 Canvas实现，通过构建多个Canvas实现多层；

2、在链路层，映射链路对象为HTML5 Line元素，通过HTML5 draw line函数渲染网络链路。具体为：将链路标识、链路形状（颜色、线宽、线型）、链路名字、链路源端、链路目的端映射为HTML5 Line元素，设置Line的起点、终点和Line的形状，进行渲染，并通过JavaScript为其注册mouseover、mouseout和dragmove事件实现对Line的操控；

3、在节点层，映射节点对象为HTML5 Image元素，通过HTML5 draw Image函数渲染网络节点。具体为：设置Image的位置、URL及缩放比，进行渲染，并通过JavaScript为其注册mouseover、mouseout和dragmove事件实现对Image的操控；

4、在拖动层，通过拖放（drag and drop）节点来改变拓扑元素的相对位置；

5、浏览器通过HTML5 WebSocket协议与服务器进行拓扑数据增量更新，数据传递采用JSON格式。

图1是本发明拓扑数据分层渲染示意图：

背景层101，是渲染背景色和背景图的canvas；

链路层102，是渲染网络链路的canvas；

节点层103，是渲染网络节点的canvas；

链路层上的链路104，是渲染在链路层上的链路；

节点层上的节点105，是渲染在节点层上的节点。

下面结合实例描述本方法的关键步骤：

1、默认加载的拓扑数据格式为：

2、多层画布的构建

浏览器完成JSON格式的拓扑数据解析，解析出数据中包含的background、node和link字段，通过建立对应的canvas来实现背景层、链路层、节点层；

3、网络链路渲染流程如图2所示：

1）浏览器完成JSON格式的拓扑数据解析，解析出链路层的link数组；

2）获取链路数据，并根据链路数据中的source和target获取当前拓扑中的节点位置。即根据source和target中的节点Id，从JSON拓扑数据的nodes数组中查找出相应的节点的location；

3）依据步骤2）中获取的source和target的location，并根据图4进行节点相对位置判断，获得source和target的相对位置方向；

4）依据步骤3）中获得的source和target的相对位置方向，并根据图4计算Line的起点source′{x:x1,y:y1}和终点target′{x:x2,y:y2}，画出line；

5）为line注册mouseover和mouseout事件；

mouseover事件首先获取鼠标位置，然后设置tooltip的内容，并设置tooltip可见；

6）通过新建一个文本层来实现tooltip的显示；

7）把line添加到链路层中，实现链路的显示；

4、节点渲染流程如图3所示：

1）浏览器完成JSON格式的拓扑数据解析，解析出节点层的node数组；

2）在解析出node数组后，获取node的imgUrl属性，并为其注册回调函数callback；下面代码在所有节点的image加载完后会调用callback函数；

3）浏览器加载节点图片；

4）浏览器执行callback函数，在节点层上画出网络节点，并设置节点可拖动；

5）为节点注册mouseover、mouseout、dragmove和dragend事件，mouseover事件首先获取鼠标位置，然后设置tooltip的内容，并设置tooltip可见，mouseout事件更改鼠标样式，并同时设置tooltip隐藏。dragmove事件新建拖动层，重绘节点和与节点相关联的链路，dragend事件通过WebSocket协议，把节点数据发送给拓扑数据服务器；

6）设置节点的tooltip；

7）把节点添加到节点层中，实现节点的显示。

图4给出了网络链路渲染时起点和终点的连接点计算方法示意图，该方法依据链路的起点和终点相对于画布容器的左上角的坐标把两节点的相对位置分成了左、右、上和下四种方向，具体为：

依据这四种方向的不同，给出了这两个相对位置的节点之间链路的起点和终点位置，小圆点和小菱形代表两个节点之间链路的连接点；

其中，起点（终点）位置相关数据包括：左上角坐标(x,y)和节点的宽度(width)和高度(height)。

针对左、右方向：

如是左情况，链路对应的一端Node1的坐标(x,y)为：x=Node1.x+Node1.width;y=Node1.y/2。链路对应的另一端Node2的坐标(x,y)为:

x=Node2.x;y=Node2.y/2。

如是右情况，那么Node1和Node2的坐标计算方法与左情况，恰好相反。Node1的计算方法对应左情况的Node2的计算方法，Node2的计算方法对应左情况的Node1的计算方法。

针对上、下方向：

如是上情况，链路对应的一端Node1的坐标(x,y)为：x=Node1.x+Node1.width/2;y=Node1.y+Node1.height。链路对应的另一端Node2的坐标(x,y)：x=Node2.x+Node1.width/2;y=Node2.y。

如是下情况，那么Node1和Node2的坐标计算方法与上情况，恰好相反。Node1的计算方法对应上情况的Node2的计算方法，Node2的计算方法对应上情况的Node1的计算方法。

总之，本发明提供的一种分层的网络拓扑可视化方法，所述方法为：将浏览器画布分为但不限于：背景层、链路层、节点层、拖动层和文本层，用于显示拓扑的背景、链路、节点、拖动的节点和文字描述；在各层中进行图形化元素渲染时，通过JavaScript为图形化元素注册交互事件，以实现与拓扑图的交互。在本发明中，结合HTML5进行进一步描述实施方法。本方法无需任何插件，能实现高性能渲染性及实时交互操作，同时，支持手机和其他一些移动设备通过浏览器进行访问，实现了对多屏的支持。

最后应说明，此处所描述的实例仅用于解释本发明，本发明并不限定具体拓扑类别和具体的JavaScript canvas库，对于本技术领域的技术人员，在不脱离发明原理的前提下，对本发明做出改动，也视为本发明的保护范围。

Claims (6)

1.一种分层的网络拓扑可视化方法，所述方法包含：

101)将浏览器画布分为：背景层、链路层、节点层、拖动层和文本层，并根据数据类型在对应的层进行渲染；

102)在各层中进行图形化元素渲染时，把拓扑数据中的背景、链路、节点和文字描述映射为浏览器的图形化元素，同时通过脚本语言为图形化元素注册相应的交互事件；

所述各层的渲染具体为：

102-1)在链路层，根据链路源节点和端节点的相对位置，计算链路的起点和终点的位置，且映射链路对象为页面上的线元素，通过页面上的线元素划线函数渲染网络链路；

102-2)在节点层，映射节点对象为页面上的图片元素，通过HTML5函数绘制节点；

102-3)在拖动层，通过拖放节点来改变拓扑元素的相对位置，当拖动对应的节点时，将在该层实现拖动元素和其相关联元素的重绘；

102-4)在文本层，当鼠标移动到节点和链路时，拓扑图中文字描述信息的显示，将通过新建文本层来进行渲染，在鼠标移开时，文本层将进行销毁；

其中，所述各层都通过网元标识查找对应最新的拓扑数据进行渲染；浏览器通过HTML5WebSocket协议与服务器进行拓扑数据增量更新，数据传递采用JSON格式；

所述步骤102-1)进一步包含：

11)浏览器完成JSON格式的拓扑数据解析，解析出链路层的链路数据，此数据以数组方式给出，数组中每一元素对应一条具体链路；同时解析出节点层的节点数据，此数据以数组方式给出，数组中每一元素对应一个具体节点；

12)获取每一条链路数据，此数据包含链路的起点和终点，起点和终点数据中包含元素标识和元素位置信息；然后根据源节点和目的节点的元素标识，从拓扑数据的节点数据中查找出相应的节点的位置信息；

13)依据步骤12)中获取链路的源节点和目的节点的位置信息，并根据节点相对位置判断，获得链路的源节点和目的节点的相对位置方向；

14)依据步骤13)中获得的链路的源节点和目的节点的相对位置方向，计算链路的起点坐标source'{x:x1,y:y1}和终点坐标target'{x:x2,y:y2}，画出新建的链路；

15)为链路注册mouseover和mouseout事件，并设置链路不可拖放；

16)通过新建一个文本层来实现提示信息的显示；

17)把新建的链路添加到链路层中，调用HTML5Canvas提供的Draw Line函数完成此链路显示；

18)迭代处理链路数据，完成链路层的显示；

所述步骤14)的网络链路渲染时起点和终点的连接点计算方法为：依据链路的起点和终点相对于画布容器的左上角的坐标把两节点的相对位置分成了左、右、上和下四种方向，具体为：

依据这四种方向的不同，给出了这两个相对位置的节点之间链路的起点和终点位置；其中，起点和终点位置相关数据包括：左上角坐标(x,y)和节点的宽度width和高度height；

针对左、右方向：

如是左情况，链路对应的一端Node1的坐标(x,y)为：x＝Node1.x+Node1.width；y＝Node1.y/2，链路对应的另一端Node2的坐标(x,y)为：x＝Node2.x；y＝Node2.y/2；

如是右情况，Node1的坐标(x,y)为：x＝Node1.x；y＝Node1.y/2，Node2的坐标(x,y)为：x＝Node2.x+Node2.width；y＝Node2.y/2；

针对上、下方向：

如是上情况，链路对应的一端Node1的坐标(x,y)为：x＝Node1.x+Node1.width/2；y＝Node1.y+Node1.height，链路对应的另一端Node2的坐标(x,y)：x＝Node2.x+Node1.width/2；y＝Node2.y；

如是下情况，Node1的坐标(x,y)为：x＝Node1.x+Node1.width/2；y＝Node1.y，Node2的坐标(x,y)为：x＝Node2.x+Node2.width/2；y＝Node2.y+Node2.height。

2.根据权利要求1所述的网络拓扑可视化方法，其特征在于，所述步骤102-2)进一步包含：

21)浏览器完成JSON格式的拓扑数据解析，解析出节点层的node数组；

22)在解析出node数组后，获取node的图片链接URL属性，并为其注册回调函数；

23)浏览器加载节点图片，当图片加载完成进入下个步骤；

24)在节点层上画出网络节点，并设置节点可拖动；

25)为节点注册鼠标移动事件mouseover\mouseout和鼠标拖动事件dragmove\dragend；

26)设置节点的提示信息；

27)把节点添加到节点层中，调用HTML5Canvas提供的Draw Image函数实现节点显示；

28)迭代处理节点数据，完成节点层的显示。

3.根据权利要求2所述的网络拓扑可视化方法，其特征在于，所述步骤25)具体步骤为：所述mouseover事件首先获取鼠标位置，然后设置tooltip的内容，并设置tooltip可见，mouseout事件更改鼠标样式，并同时设置tooltip隐藏；

dragmove事件新建拖动层，重绘节点和与节点相关联的链路，dragend事件通过WebSocket协议，把节点数据发送给拓扑数据服务器。

4.一种分层的网络拓扑可视化系统，所述系统包含：

分层模块，用于将浏览器画布分为但不限于：背景层、链路层、节点层、拖动层和文本层，并根据数据类型在对应的层进行渲染；

渲染模块，用于在各层中进行图形化元素渲染时，把拓扑数据中的背景、链路、节点和文字描述映射为浏览器的图形化元素，同时通过脚本语言为图形化元素注册对应交互事件；

所述渲染模块进一步包含：

链路层渲染子模块，用于根据链路源节点和端节点的相对位置，计算链路的起点和终点的位置，且映射链路对象为HTML5Line元素，通过HTML5Canvas提供的draw line函数渲染网络链路；

节点层渲染子模块，用于映射节点对象为HTML5Image元素，通过HTML5Canvas提供的draw Image函数渲染网络节点；

拖动层渲染子模块，用于通过拖放节点来改变拓扑元素的相对位置，当拖动对应的节点时，将在该层实现拖动元素和其相关联元素的重绘；

文本层渲染子模块，用于当鼠标移动到节点和链路时，拓扑图中文字描述信息的显示，将通过新建文本层来进行渲染，在文字描述信息消失后，文本层将进行销毁；

其中，所述各层都通过网元标识查找对应最新的拓扑数据进行渲染，所述各层进行图形化元素渲染时，通过JavaScript为图形化元素注册交互事件，以实现与拓扑图的交互；且浏览器通过HTML5WebSocket协议与服务器进行拓扑数据增量更新，数据传递采用JSON格式；

所述链路层渲染子模块进一步包含：

解析单元，用于浏览器完成JSON格式的拓扑数据解析，解析出链路层的link数组；

链路端点相对位置获取单元，用于获取链路数据，并根据链路数据中的source和target获取当前拓扑中的节点位置，即根据source和target中的节点标识Id，从JSON拓扑数据的node数组中查找出相应的节点的location；并根据节点相对位置判断方法，获得source和target的相对位置方向；

链路画出单元，用于依据相对位置获取单元中获得的source和target的相对位置方向，并计算Line的起点source'{x:x1,y:y1}和终点target'{x:x2,y:y2}，画出line；

交互事件建立单元，用于为链路line注册鼠标移动事件mouseover\mouseout，并设置line不可拖放；同时为节点node注册相关鼠标事件mouseover\mouseout和拖放事件dragmove\dragend；

文本显示单元，用于通过新建一个文本层来实现tooltip的显示；

添加单元，用于把line添加到链路层中，实现链路的显示。

5.根据权利要求4所述的网络拓扑可视化系统，其特征在于，所述节点渲染子模块进一步包含：

第二解析单元，浏览器完成JSON格式的拓扑数据解析，解析出节点层的node数组；

回调函数注册单元，用于在解析出node数组后，获取node的图片URL属性，并为其注册回调函数；

加载单元，用于浏览器加载完整的节点图片；

节点画出单元，用于依据节点数组中的节点数据的坐标位置(x，y)和宽width高height设定，迭代画出节点Image；

第二交互事件建立单元，用于为节点注册mouseover、mouseout、dragmove和dragend事件；

设置节点文本单元，通过新建一个文本层来设置节点的提示信息；和显示设置单元，用于把节点添加到节点层中，实现节点的显示。

6.根据权利要求5所述的网络拓扑可视化系统，其特征在于，所述交互事件建立单元的具体操作为：所述mouseover事件首先获取鼠标位置，然后设置tooltip的内容，并设置tooltip可见，mouseout事件更改鼠标样式，并同时设置tooltip隐藏；

dragmove事件新建拖动层，重绘节点和与节点相关联的链路，dragend事件通过WebSocket协议，把节点数据发送给拓扑数据服务器。