基于canvas的图分析方案（知识图谱）

基于canvas的画图，可以选择阿里巴巴的G6，使用它提供的api进行画图，这种方案适合小公司小团队；如果公司规模和团队还不小，可以基于d3自己封装画图的能力，可以参考G6或者国外的一些开源项目，这样子在性能和功能上都做到的自主可控，我当时在的公司和团队还不错，所以选择自己来搞，基于d3自己分装的画图底层库，地址是：https://www.npmjs.com/package/hz-graph-canvas，分层架构：

 其中做了很多的性能优化，比如：针对图数据对象进行了可扩展性的限制，防止vue对它进行响应式的处理，增加无用的属性；针对图数据对象里面的子对象作为组件的响应式数据进行了优化；对数据的循环和过滤，使用最优的循环算法以及尽量复用同一个对象等；在进行频繁操作的时候，canvas只画关键的数据，等用户停止操作后，再画不关键点数据；在调用图内算法对图数据进行处理时，使用webassembly的技术实现（图内算法使用rust语言书写，然后转成wasm，最后使用js进行调用）；超出canvas画布区域的图数据不进行绘制；使用Map和Set处理数组对象和key数组（数组的includes api在大数据量下性能不如Set的has api）；在组件和方法中使用深拷贝图数据用做临时变量也进行了优化。

前期的架构搭建非常重要，如果一开始的设计与未来业务的发展或者产品的设计不匹配，在后期改动过程中，会增加指数级的维护成本，举个例子：当时我们在做图分析的时候，一开始只针对一个图数据进行设计，后面在设计的过程中，我们想到了为什么图数据只有一个，用户如果要对多个图数据同时进行分析怎么办？因此我们对我们的数据结构进行了重新定义，相应的基础架构代码也进行了优化和扩展，所以技术leader或者架构师对一个系统未来能不能快速支撑业务的发展至关重要。