关系图的现状
随着数据的暴增以及数据搜集技术的发展，目前各个公司都积累了很多的数据。从这些数据中挖掘信息，进而发展出产品，或者分析用户信息，对用户进行画像，类似这样的需求越来越多。
而这些数据最终的呈现，都会以可视化的形式来作为载体。关系图应运而生。
注意：我们做关系图的时候，一定要在初期明确：
这个图我们是准备让用户当成工具来用，还是只是随便看一看而已？
因为如果是想将其作为一个工具，那么我们就需要加上各种辅助功能，比如编辑、元素的展示隐藏的自定义等等。这样用户可以根据自己的需求，筛选精简数据，将其真正当成一个工具来使用。
而如果只是作为一个纯展示的页面，那么就应该少交互、多结论。有点类似大屏的设计原则。
前沿研究方向
可以看下北大的这个文章：http://vis.pku.edu.cn/blog/gotree/
关系图(树)的各种形态
这里有很多超乎想象的树图，可以帮助我们寻找灵感：
还有这个网站也不错：
http://go-tree.info/gallery.html
这里还有一个在线树图编辑器，挺牛逼的：
http://go-tree.info/app/index.html
各公司的关系图现状
企查查
企查查对于关系图的应用，典型的有两个。
关系图谱
企查查的关系图谱，类似这样：
这个图从源码来看，是用 D3.js 画的，输出的是 Canvas 画布。通过抓包，可以看到他们后端只提供了基础的节点和关系连线数据，因此布局是前端来计算的。针对同一个页面地址，每次刷新页面后，里面的人员-公司布局都是不变的，因此可以知道他们这个布局是通过自己设计的算法来实现的，没有采用 D3 的 force 布局。这样布局的好处是用户每次看到的内容不会随意变更，且开发人员可控；弊端就是布局不一定美观(特别是针对极端数据)，且连线交叉情况较多，会给用户增加一定的视觉成本。
股权穿透图
股权穿透图的效果如下：
企查查在交互上做得不错，用户还可以自己编辑(删除)节点。但是这个图有天生的缺陷，就是同一个层级数据较多的时候，横向展开太宽了，很不利于查看。如果是在手机上，受限于屏幕大小和交互的不便利性，就更没法看了。
全历史
全历史在时间轴和关系图上，都做得很不错，网上有很多正面的评价。
另外他们的过渡动画是一大亮点。
在设计、细节上，也是非常有特色的。
关系图
全历史的关系图分为了 PC 版和移动版，二者是不一样的。
PC 版
PC 版关系图效果如下：
这个关系图的排版非常美观，因为这是提前排好，后端直接把每个节点的坐标数据传递给了前端。因此是加入了人为控制的。
这个关系图还有播放功能，可以逐个演示关系，并且每个关系都是可以点击的，点击后会展示这个关系的由来，也就是关系溯源功能，这个非常赞。
页面上微动效很多，比如选中节点，节点外围会有一圈转动的光晕等等，这些也是增色的点。
移动版
移动版的，可以在全历史的 APP 中查看，效果如下：
移动版的关系图，考虑到手机的大小和交互性，功能上比 PC 版做了一些删减和适配。
这个图也是很不错的，不过关键在于数据，通过分类将某个人物的各方面信息展示出来，清晰明了，真正帮助用户快速获取信息。
注意，这个图在节点样式上做了很多功夫，通过节点的图片、形状等等来表达不同的分类，值得我们学习。
时间轴
时间轴部分比较简单，主要是前端简单实现即可，重点在于视觉设计，因此这里就略过了。
族谱
族谱图的亮点主要是在布局上，这个可以实际去用一下，是有一些考虑在里面的，而不是简单的一个树状层级布局。
和企查查的股权穿透图一样，这个族谱图也有弊端，在横向关系较多的时候，不方便查看。
另外全历史的移动端图形，目前没有切换横屏的快捷入口，这也是一个可以优化的地方。