前面给大家简单科普了一下VR的硬件设备以及VR在各个领域的应用，是不是觉得非常高大上？千言万语概括成一句话，VR能给用户带来前所未有的沉浸感和交互方式，让人足不出户就能够接触到外面的世界。世界那么大，我想去看看，可是我又懒，那该怎么办？于是，VR就这么火了。

相信很多人都跟我的朋友A一样，觉得VR是高科技，太先进，太高不可攀了。然而事实并不是这样。随着技术的普及，VR已经逐渐渗透到我们生活的方方面面。（没有做不到，只有你想不到）

有人说，2016年是VR内容元年，而2017年，可能会是VR垂直应用的元年。在我看来，是不是元年还不确定，可以肯定的是，各个行业都需要有经验的人参与进来一起探索，才可能造就VR应用的落地生根。

作为一个长期在数据中心行业里浸染的人士，并且已经在三维可视化领域耕耘数载的老司机，凭着个人的嗅觉，我是非常看好数据中心的VR应用。理由有几个：

首先，数据中心的三维可视化技术已经成熟，大量的内容已经被生产出来，只差打通VR应用。

第二，数据中心本身的运营和管理的确需要高沉浸感的体验方式。数据中心本身就不是一个可以随意进入的区域，而且，数据中心的规模日益扩大，早已无法依靠人力去巡视和管理。

第三，数据中心市场前景非常开阔，基础设施、软件开发、运维管理各个层面的从业者都有这个能力来引入VR这样的应用。

第四，数据中心本身就处于前沿技术领域，天生拥抱新鲜技术，不存在传统行业经常遇到的阻力。

想要用户为VR买单，一定是因为它实实在在的解决了问题。下面我们就来看看VR是如何与数据中心机房应用结合起来的。

，我们拿TWaver的3D机房当小白鼠，戴上头盔，你就会感觉到自己身处于园区当中，以行走在园区中的视角去查看并了解整个企业的资产。

转动头部可以轻松控制视角与方向，便于看到各个角落。

手柄就是你在虚拟园区中拥有的虚拟双臂。利用手柄，可以选择需要进入的园区，楼层和房间，还可以打开机柜，查看设备，板卡，进行设备上下架的操作等。虽说在PC屏幕上操作三维可视化系统已经是非常清晰直观了，但是采用VR技术，能让用户有身临其境的感觉，仿佛亲自在机房过道里行走巡视，对机房进行管理。

除此之外，VR技术还能协助机房设计。设计师带上头盔，能够利用站在机房里的视角对机柜，机架，走线进行布置，更加合理高效。

VR效果的3D机房是不是很酷炫呢？要实现这样的效果在程序上操上其实并不难。

大家都知道TWaver数据中心可视化软件是基于WebGL的，用浏览器就能跑起来。同样，用浏览器也能进入VR的世界。用浏览器就能体验VR就要感谢WebVR了，目前谷歌的Chrome VR版和火狐的Nightly版都支持WebVR，这些浏览器也支持HTC Vive和Oculus Rift。

目前只有WebGL的内容才能呈现到WebVR中，将来可能普通HTML元素也能在WebVR中呈现，下面我们来看看如何使用WebVR：

嗯，相信你也看到了，其实也没有什么神秘的：就是把canvas的大小设置成VR眼镜的大小（否则眼镜里看到了图像会非常模糊，原因是虽然VR眼镜离人眼非常近，即使VR眼镜的屏幕很小，但分辨率比普通PC高多了）；然后把3D场景绘制了两遍（分左眼和右眼）。WebVR对硬件的性能要求更高了，除了绘制两遍外，刷新屏幕为90赫兹，需要保证13ms内绘制完成，否则很容易让用户感到头晕。

如果你手头上正好有HTC Vive或者Oculus Rift，赶紧来试试VR版的TWaver数据中心可视化软件吧。或者戳下方视频，看看真实版用户体验↓

VR技术支持的数据中心可视化

VR支持的数据中心可视化就先说到这儿了，要是有对VR有兴趣想进一步了解的，或者对其它技术问题想要聊一聊的，欢迎留言：)

前两天跟朋友A吃饭，吃着吃着就说到了VR。近几年来，VR技术越来越火，感觉能跟VR沾点边的都特别高大上，朋友A也是，一提到VR，就怎么都掩盖不住他发自肺腑的敬仰之情。好吧，作为一个技术宅，我觉得是时候说点跟VR相关的事儿了。

VR，也就是 virtual reality的缩写，全称是虚拟现实。从字面上理解，就是这种技术能把现实中的一切实物用模型建造出来，再通过一些硬件设备的对接，把你的身体放在这个虚拟场景当中，甚至是用一些不属于人类本身的视角去看这个世界。

举个栗子。Google earth已经在去年为自己的产品提供了全方位的VR技术支持。

地球的图片大家都见过吧？可是身处浩瀚宇宙中去看这颗我们赖以生存的星球，这样的体验你你有过吗？

再比如，相信大家都爬过山，我也是登山爱好者。每次爬山都觉得山顶高不可及，累到气喘吁吁也只有仰望的份。但是让自己像雄鹰一样掠过一座座山顶，俯瞰山川，这样的视觉效应是不是也让人心痒痒呢？

所以简单地说，VR就是这样一种技术，能让你有一些超越人类视角本身的体验。

说完VR是什么，再来谈一下VR怎么实现吧。用最简单粗暴的方式来说，无非就是一：硬件；二：内容（技术支持）。

现在市面上有很多VR硬件，大致可以分为三类：VR眼镜、VR一体机、VR头盔。

VR眼镜

如果你预算有限，只是想体验一下VR，看看电影，玩玩小游戏，可以考虑VR眼镜。VR眼镜又细分为2类：入门级和进阶版。

入门级的VR眼镜就是个盒子，里面有2个镜片，放一个手机进去，代表作有谷歌的Cardboard、小米VR玩具版等，需要手动调焦，延迟和眩晕感都很严重。

进阶版的VR眼镜有运动传感器，对手机硬件做了优化，延迟和眩晕感比入门级的低。一般会配备一个控制器，类似鼠标，有了控制器就不需要用脑袋交互了，用控制器就可以交互。代表作有三星的Gear VR、谷歌的Daydream View、小米VR眼镜等。这类VR眼镜一般只支持自家的手机。如果手上正好有这样的手机，可以买个对应的VR眼镜尝尝鲜。

一类VR眼镜号称兼容各种型号的手机，VR沉浸感比进阶版的差一些，原因是没有针对具体手机优化，代表作有暴风、大朋等。价格比入门级的几十块的贵，比进阶版的便宜。

VR一体机

简单讲就是VR眼镜内置了手机，代表作有暴风魔镜一体机Matrix、大朋VR一体机M2等。现阶段不建议购买VR一体机。不过这次谷歌在这次IO大会上发布的，跟HTC和联想合作的Daydream Standalone VR值得期待，据说使用了谷歌最新的WorldSense技术，可以不需要外部定位设备，就能追踪头部的位置，而不仅仅是头部的旋转 

VR头盔

需要用HDMI视频线连接高性能PC主机，也就是靠PC主机的显卡输出视频信号到VR头盔里。另外这类设备一般配备定位装置，能感知头盔、手柄的位置、方向、加速度等。如果你是游戏发烧友，强烈推荐VR头盔。代表作有早期的HTC Vive、Oculus Rift、索尼PlayStation VR，以及国内的后来者大朋VR头盔E3、蚁视二代头盔、小派4K、hypereal的Pano等。

VR头盔的优势很明显：延迟小，有定位装置，但美中不足的是必须拖一根视频线，在VR世界中漫游时总是会不小心被这根线缠住，而且VR头盔普遍比较重。不过去年双11期间HTC推出的TPCAST VIVE无线升级套件让VR头盔摆脱了这根线的束缚，不过也有报道说2套TPCST之间有干扰，而且待机时间也是个问题。

由于VR眼镜、VR一体机都是借助于手机呈现3D内容，性能都没法满足数据中心可视化的要求，而且没有很好的定位方案，为了最好的视觉和交互体验，我们采用了由HTC和Valve共同研发的VIVE。

谈完VR硬件，再来谈谈VR内容。面向消费者的VR内容可以分为：游戏、全景视频、全景直播、全景图片等；面向企业的VR内容就很多了，在教育、军事、医疗、旅游、房地产、健身、室内装修、商品展示等领域都有应用。

另外VR内容的制作分两类：全景拍摄和3D建模。全景拍摄可以生产出全景视频、全景直播、全景图片等，全景图片可以加工成VR应用，用户只能在几个固定的点中移动，不能在3D场景中随意行走。游戏、TWaver数据中心可视化软件等，都需要3D建模。前面栗子中提到的Google Earth VR结合了全景拍摄和3D建模，属于黑科技产品，可以戳链接亲身体验一下。

 Google Earth VR

https://vr.google.com/earth/

支持HTC Vive和Oculus Rift

Steam下载地址：

http://store.steampowered.com/app/348250/

如果你碰到如下提示：

This item is currently unavailable in your region

可以在IE或者Edge中输入如下地址即可安装

steam://install/348250

如果你在启动Google Earth VR时碰到如下提示：

loading labels failed due to an unknown error

说明你和google服务器之间有障碍，请科学上网

Google Earth VR是谷歌10几年前发布的Google Earth的VR版，让你足不出户就能领略世界各地的自然风光。

交互上最大的亮点是在城市中穿梭时，只有中心画面在动，边缘画面被虚化，出现了不动的网格，谷歌管这个tunnel vision。这样你就会感觉自己站在原定不动，只是眼前的画面在动，就像看电影似的，好处是既不会像真正的飞行那样让人产生眩晕感，也不像teleport那样得不到连续的场景变化效果。

可惜的是国内是一马平川

除了Google earth VR之外，还有一些我个人觉得还不错的产品，比如：

 The Lab

支持HTC Vive和Oculus Rift

Steam下载地址：

http://store.steampowered.com/app/450390/The_Lab/

这款游戏包含了8个小游戏，是Valve在VR游戏领域的试水作品。进入VR世界后，以往PC的交互方式都过时了，Valve的工作人员尝试了各种交互方式，让VR游戏体验更真实。更多关于这款游戏的开发历程，可以移步这里：

https://www.youtube.com/watch?v=rtotczP5DrI

比较搞笑的问题是（我也试过，哈哈）：

还有这个也可以尝试着玩一把：

 SteamVR Home

SteamVR Home是Steam平台推出的SteamVR应用启动平台，玩家可以定制自己的私人空间，和其他玩家交互，打开了VR社交应用的新篇章。

安装方法：打开Steam，在Library中的Tools中找到Steam VR，右键选择Properties，在Betas页签中选择SteamVR Beta

更多关于SteamVR Home的介绍可以参考这里：

https://steamcommunity.com/games/250820/announcements/detail/1256913672017157095

按着手柄的方向按钮可以在房间内跳跃：

进入特定的区域（有字母i的地方）后，比如门前和花园前，会出来菜单，可以自定义场景：

今天就先说到这儿吧，明儿下班再给大家侃点更酷炫的：）

前言

最近特别忙，承蒙大伙关照，3D机房的项目一个接着一个，领了一帮小弟，搞搞传帮带……有个小弟很不错，勤奋好学，很快就把API都摸透了，自己折腾着做了个HTML5的魔都的地铁线路图，能拖能拽的，还和电子地图做了交互。哥决定把小弟的成果给大家展示一下。

效果图对比

网上的地铁图还是很多的，小弟选了这张比较新的做参考。想当年哥来魔都打拼时，图上可就一红一绿打个叉……暴露年龄的话不多说，看图：

再来看看小弟做的：

我是一眼看不出区别，但这可不是一张效果图，而是一个新手仅用了几天做出来的东西，而且里面许多美化和调整是通过程序自动完成的，这就不容易了。更重要的是，它并不是一张死图，而是纯矢量、可交互、有动态效果、无失真缩放的拓扑图！我们先简单看一下交互效果，后面可以详细说说代码的实现。

文本提示弹弹弹

首先，把鼠标移到站点、路段、图标等位置，都会有文本提示弹出，这个比较基本，百度家的就有，小弟也就放了比较简单的弹出内容。如果加上基本介绍啊、相关提示啊、周边信息啊……要是加上广告，就可以赚钱了……反正什么都可以加嘛，就是一个setToolTip命令而已。

站点图标变变变

当鼠标移到站点上时，站点图标做了放大效果，这个效果很贴心，看了下百度家，用的是发光效果。

实现的方法也很简便，就是在注册站点矢量图形时，加入了动态判断。以下注册普通站点矢量图形的代码：

以下网页3D案例均为TWaver原创出品，推荐使用Chrome, FireFox, Safari等对WebGL支持良好的浏览器运行。案例排名不分先后，如需Demo，可直接申请试用。

1、化学元素周期表

六种排列方式，炫酷动画效果，TWaver 3D轻松实现。

演示地址：http://demo.servasoft.com/chemical-table/

2、DNA螺旋图

DNA3D模型，包含几千个球体（几十万个面），高性能渲染，搭配丰富色彩和光照效果，可用于医疗三维可视化。

演示地址：http://demo.servasoft.com/dna/

3、3D手表

细腻的皮革质感，镜面反射效果，指针动画，真实时间显示。

演示地址：http://demo.servasoft.com/watch/

4、3D拓扑图之花团锦簇

艳丽多姿的3D小球花，不足百行代码即可实现。

演示地址：http://demo.servasoft.com/tuopu/

5、3D拓扑图之人在江湖

使用立体拓扑图来展示错综复杂的关系网，事半功倍！

演示地址：http://demo.servasoft.com/person/

6、地球卫星运行模拟

星球大战，一触即发！

演示地址：http://demo.servasoft.com/earth/

7、CNC机床监控

工厂三维可视化，助力工业4.0+智能制造时代。

演示地址：http://demo.servasoft.com/cnc/

8、加气站三维可视化

加气站分布站点广，安全要求高，通过三维可视化监控，提升安全水平和紧急事件的处理能力。

演示地址：http://demo.servasoft.com/pipe/

9、库房三维可视化

可对接仓库资产管理系统，让仓库管理更加智能化。

演示地址：http://demo.servasoft.com/demoWarehouese/

10、3D小机房

汇聚资产、动环、告警、安防管理和监控一体的3D机房小程序，经典的，就是最好的。

演示地址：http://demo.servasoft.com/room/

前言 

最近忙着给客户折腾一个复杂的多层嵌套关系。客户一句话“要好看！”，哥就忙白了头啊，还好最终搞定了。

需求描述 

先简单描述下这次客户的需求。

现实应用中，网络拓扑图结构可能很简单，也可能非常复杂。

比如这种节点较多的单层拓扑：

稍复杂一些的：

再复杂一些的：

在这些拓扑图中常见的场景是，很多网络节点需要组成一组，这常被称为“网元组”。一般来说，网元组会有一个形状，双击可以展开/闭合。如下图：

这次客户的需求中，最大的难点就是需要有五层网元组的嵌套，五层同时展开时，要求清晰美观。常规的分组形状有圆形、矩形、平行四边形等，无论哪种形状，分组多了后，就会产生审美疲劳。比如，我让设计师mm简单地把五层嵌套画个图，它看起来会是这样：

我把这个图给客户看了以后，客户表示希望“结构能够更加清晰”。那天，魔都大雨倾盆，我抓耳挠腮一个下午，终于有了一些灵感。

颜色 

怎样才能使得结构效果更加清晰？我想到的是用颜色。颜色永远是图形设计里面的第一要素。如果分组颜色千篇一律，自然就看不太清楚包含关系。但是颜色太多五颜六色，显然也不符合电信UI系统的风格。那颜色要如何设置呢？层层嵌套的分组，层层……叮！你有没有想到一种蔬菜？

（此处哼唱“如果你可以一层一层一层地剥开我的心……”一百遍……）

这颗大洋葱看上去层次分明，是因为它的颜色从内到外有一定规律的变化：渐变。说到渐变，又想起最近GF推荐的一枚游戏，大概内容是按照颜色的渐变规律来排列一些方块。（很无聊有没有？）

不过，前端设计中，配色倒是很重要的一个环节。

总之，想好了用渐变的配色来使嵌套组更清晰后，就大胆地尝试一下：

在我们协助客户进行3D应用的开发过程中，客户遇到的最头疼的问题是如何在短时间内学会使用TWaver 3D引擎，以及使用TWaver 3D来创建和导入项目所需的各种3D业务模型。由于项目涵盖的行业繁多、对模型种类和精度的需求各异，为了降低TWaver底层引擎的使用难度，TWaver发布了一款全新的模型库框架TWaver® Make，来帮助开发者快速创建高质量、专业的行业可视化应用场景。

简单来说，TWaver® Make提供的是模版定义的开发SDK框架，和高质量的跨行业模型库。使用TWaver® Make，可以把TWaver 2D/3D的代码细节包装在模版中进行复用，极大的降低使用TWaver的复杂度，提高开发效率。

模型定义

TWaver® Make基于Javascript对各类资源进行模版化定义，它的核心只有2个函数：

make.Default.register进行模版定义；

make.Default.load进行模型加载。

通过数据的模版化，可以实现各类资源的标准化、快速共享与复用。

TWaver® Make 可以快速定义：

- TWaver HTML5 2D拓扑图 

- TWaver Mono 3D模型 

- HTML片段、eChart等第三方ui组件 

- 字符串、数据、图片、文件等资源 

模型加载

TWaver® Make模型库提供了大量高精度、专业的行业预制2D、3D模型库，可以直接使用。模型库就像一本字典一样，开发着只需查阅模型id，就可以通过load方法快速加载使用这些内置模型。

例如，下面代码调用了Make中预定义的电力变电站中的变压器模型。已知变压器模型的id为twaver.grid.transformer，则：

自TWaver 3D产品发布以来，TWaver 3D的定位一直在于为企业提供3D应用的快速开发工具，方便企业开发适合自己的高效、实时的监控系统。

基于这样的产品定位，我们在过去的一年多时间里，一直将重心放在提升引擎效率，增加可视化工具上。对于我们的优势应用行业——电信行业，我们在3D机房应用上做了比较多的优化和定制。近期，有不少客户向我们提出，总觉用TWaver 3D开发出来的界面，不像主流的3D效果那么精美。首先，我们想说，效果图终归是效果图，和实际的系统一般来说还是有一些差异。其次，3D Max这些专业3D建模工具，和TWaver并不是对立的，而是相辅相成的工具。我们已经支持将3D max的文件导入TWaver进行展示，也正在研究使得TWaver能对接更多的模型类型。大家可以一起讨论，如何让TWaver的3D模型做得更好。最后，我们始终相信，作为开发工具的我们，是前途无限的，因此我们决定挑战一下效果图，看看TWaver的3D效果，到底有多强。

首先我们先找来一张效果图，真的是效果图哦~~

定义了一个窗洞（挖掉）、一个窗台（添加）。一个大窗户就做好了：

再添加一个略带颜色的透明玻璃。玻璃设置点高光和反射，增加“玻璃”感觉：

设备

简单起见，这里管理的设备假设都是机架设备，尺寸规格比较规整，因此比较容易在机柜中组织。一个设备的外观确定后，在数据库中定义好模板，加载时根据其所在机柜的位置放置即可。这里只是随机生成了几个服务器设备，并按位置摆放。在实际应用中，可以通过手工录入或者智能机架报送的信息来确定服务器的类型和位置。



如果需要监控到端口级别，还可以在服务器弹出后，再进一步延迟加载设备商的板卡、端口对象，并点击后进一步进行配置、监控等操作。当然加载的数据越细，对3D引擎和浏览器的压力会越大。可以通过动态延迟加载/卸载策略，获取一些平衡折中。

25年过去了，Brooks博士著名的“没有银弹”的论断依旧没有被打破。HTML5也是一样。但这并不妨碍HTML5是一个越来越有威力的“炸弹”：发展迅速、势不可挡。随着HTML5技术的普及，用HTML5做可视化呈现的项目越来越多了。HTML5的优势明显：网页上直接运行无需插件、手机平板方便兼容、代码开发和维护相对容易，等等。一大波一大波的做Java、.NET甚至C++桌面的程序老手们都纷纷开始研究javascript了，而初出茅庐的新一代程序猿更是义无反顾的直奔HTML5这个技术大热点而来。

研究d3的起因是最近有一个项目，用户截了一张效果图让我们用HTML5做一下：

var item = {name: '名称', color: 'red', angle: '45', …};

var item = {name: '名称', color: 'red', angle: '45', data:[
{name:’孩子一’, color:’green’,…},
{name:’孩子二’, color:’yellow’,…},
]};

twaver.Util.registerImage('node', {
v: [{
shape: 'circle',
r: 
lineColor: function(data,view){return data.getClient("lineColor");},
lineWidth: 
startAngle: 
endAngle: 
},{
shape: 'text',
textBaseline: 'middle',
textAlign: 
text: 
x: 
y: 
font: 
fill: 
rotate: 
visible: 
shadow: 
}],
});

矢量图中定义了2个图形元素：一个arc弧线、一个文字对象，分别用于画node和绘制其文字。颜色、字体、是否可见、阴影、对齐、位置、线宽、角度…等等均在上面的定义中用一个function动态获取。例如，这个节点的半径，通过下面的方法，就可以在图形的lineColor属性中保存并驱动，需要修改，直接修改lineColor这个client属性即可，而不用去修改绘图参数，非常方便：
r:function(data,view){return data.getClient("lineColor");}


二、文字控制

文字控制也比较啰嗦。首先是对齐方式。最简单的方式当然是让文字在所在扇片处，直接居中、旋转。这样文字会在径向的中间位置，如下图：

但这样显示感觉并不是很完美。对于中文来说，如果能统一靠近圆心方向的位置对齐，会更好看一些。这样，即使文字过长，也会向外延伸，不会和里面的重叠。如下图：

还有，当文字在左半圆时，如果不做特殊处理，文字旋转会导致文字大头朝下，阅读起来有把脖子歪断的风险。所以应该动态判断，如果文字在左侧，应该文字再增加旋转180度。同时左侧的文字对齐也要特殊考虑，应该变成右对齐，才能保持径向的整齐一致。

文字还有一个细节就是颜色和阴影的问题。不使用阴影，单纯的使用颜色（例如白色），则在一些方向上的节点的文字会看不清楚，因为我们做的是彩虹爆炸图，各个方向颜色都不一样，而且还会随着圈数增加而变淡颜色，所以几乎不可能用一个固定的颜色（例如白色或黑色）能保证文字在所有地方都能和node颜色搭配并看清楚。所以思来想去还是使用了阴影效果。

至此，彩虹爆炸图基本上就做的差不多了。使用起来也很简单，只要准备一些json数据就可以了，下面是一些有趣的数据做出来的效果。感兴趣的同学可以联系我们索取代码。

看到这样的图，是不是觉得不就是用了几张贴图嘛，如果这样想，那么你对twaver还是有所了解的。前面我们已经提到了，这是一款全矢量的流程图，这里可没有用到任何贴图哦，下面这些网元都是矢量描述出来的，缩放不失真。接下来我们就来介绍一下如何矢量描述这些网元呢？

这里我们以第一个为例，来介绍如何用矢量来描述这个元素，首先我们需要画一个圆角正方形，并且颜色是稍微带点渐变色，我们这里采用了线性渐变，中间是灰色，两边白色，代码如下：

看下运行后的效果：

接着按照这种方式画中间的橙色小方块，一样的道理，也是中间画个圆角矩形，用了橙色的渐变：

最后就是中间几条线了，可以采用path来描述，自己画出每个像素点，代码如下：

写到这里，你会不会觉得怎么现在弄个矢量的图片这么复杂，像素啥的还要自己来算。如果什么都自己干，那么自己是不是也可以当美工了。哈哈哈，如果你觉得可以，一些简单的美工活是不用求别人了，自己也能干。但是如果你觉得复杂，也可以直接用美工提供的svg图片，通过twaver的转换器直接转换出上面的这些代码。 矢量图片先讲到这里，我们再来看link上是如何画出一个箭头的，就是下面的这种效果：

这里我们用到了link的icon附件，link上icon的附件也可以用矢量哦，是不是很赞：

1 link.setStyle('icons.names', ['link_arrow']);

这里的'link_arrow'就是我们注册的矢量图片名称。 加了连线的矢量，连线的走向也需要自己定义一下。这里通过linkpath来定义,network上提供了设置linkpath的方法：

连线的走向我们这里采用了先水平后垂直的方式，也可以加上水平的偏移的值，这样我们可以控制连线的拐点。

这款流程图，最大的特点是可以合并展开子流程，并可以指定合并时收起哪些点，合并后的效果如下：

这样流程图就会清晰很多，如果不想看中间复杂的子流程合并起来就可以了。 这里的我们录制了一个视频供大家欣赏：  

感兴趣的朋友可以发邮件到tw-service#servasoft.com，我们会将完整代码呈现给您。

例子中我们展示的是各部门员工之间的复杂关系图。在公司内部，不仅部门内部员工之间发生着关系往来，部门和部门之间的员工也在发生这各种往来关系。如果你还是用原先的那种表格来呈现，显然很难直观看出各种关系，用图形化的拓扑呈现就会显得一目了然。好了，我们就来分析一下这张图如何用twaver实现它。

首先我们要定义部门的网元，twaver矢量减少了我们很多定制UI的繁琐，我们直接用矢量来描述这个小圆点部分，注意小圆点的颜色需要区分鼠标滑过时的效果，这里我们定义了是否需要高亮的属性：highlighted，代码如下：

第一步，小圆点描述好了，接下来就需要为圆点加上文字的显示，文字如果按照默认的显示方式显然不太好，因为我们是要让文字进行旋转，而文字所处的位置需要根据角度来计算对其方式和偏移值，当然文字也需要鼠标滑过的效果：

好了，第三步需要让整个节点能旋转起来，因此我们还需要为node加上旋转的矢量描述：

至此部门的节点就定制好了，是不是感觉复杂了一下，没关系，如果想要这样的功能，直接使用我们封装好的这个就可以了。 接着我们还需要来定制连线，上图中连线走向的那种方式在twaver产品中已经是很常见了，这里我们就不多描述了。 OK，准备好节点和连线的矢量描述之后就可以来填充数据了，创建好公司的所有部门以及员工之间的关系后，我们还需要给部门设置上旋转的度数：

1 for(var i=0;i<size;i++){
2     var angle=Math.PI*2/size*i;
3     var x=ball.cx+ball.width*Math.cos(angle);
4     var y=ball.cy+ball.height*Math.sin(angle);
5     var id='n'+i;
6     var degree=parseInt(angle/Math.PI*180);
7     var node=createNode(box, id, x, y, '部门'+i, degree);
8 }

这样我们上面的那张图的功能就差不多了。也许有人会觉得怎么都是呈现的是部门，如何才能看到部门下哪些员工和另外的部门有关系呢。是的，到此我们还只完成了一半，还有更精彩的内容呈现给大家。

双击部门后，可以展开这个部门，并显示部门下所有的员工。

是不是很帅，注意这里是有动画效果的，双击某个部门，这个部门会转到顶部，然后展开这个部门。这个用twaver新增的动画功能很容易来实现，这里就不多说了。下面录制了一个视频供大家欣赏。这样我们就能更清楚的知道这个部门下的员工和哪个部门下的员工有业务往来关系了。下图是一个gif图片，下载有点慢，请耐心等待。

或者直接点击看视频：