技术拆解-关系图
开源做图库
这个文章对常见的几个做图库做了分析。我们之前用的是vis.js，从这个文章里面分析的内容来看，目前vis.js在做关系图的需求上，也是最适合我们的(交互性强、有一定定制性、文档齐全)。
画关系图，其实最大的难点我感觉有2个：布局和连线。
布局可以用d3来处理，force和tree能满足大部分需求。
连线可以用dagre，这个库是专门处理布局和连线的，从他们的wiki上可以看到，他们将很多论文转化为了具体的实现，用这个库画出的连线，能最大程度上减少交叉，非常不错。
一些技巧
- 用了lodash库，比如深拷贝cloneDeep()；但是感觉没必要，额外增加了文件大小
- 使用了d3的如下特性
选择器、缩放、node()、事件监听、resize
关键在于对d3和dagre的api要足够熟悉。
经验教训
- 画图难就难在找
数据规律的这个过程；找到了就很简单，找不到就做不出来。 - 数据量少、交互多、内部需求(个性化)，选择SVG更好
- 利用foreignObject这个HTML标签，结合SVG，可以极大扩展图形的表现力
抽象能力和递归在布局算法设计中，至关重要