关于5W+图元的神经网络渲染

接手了个别的公司开发的神经网络图，上千条数据就卡的不行，产品要求优化，好吧try。。。

排除法得到结论：

1.跟电脑本身性能有关，浏览器渲染canvas瓶颈，虽然双缓冲已内置。（无法优化）
2.接口返回速度，后端优化
3.layout布局算法（cose） 布局占 65%，改成fcose(力导向布局)之后从25s，优化到8s，优化35%。满足2k以上不卡。
4.样式渲染 20%，cy把png渲染成canvas，简化多余样式，统一节点大小，优化10%。样式越复杂越卡顿，当数量达到2w+，利用随机算法依然能很快渲染，但是即使是canvas2d操作如此多图元依然会卡顿。
5.自写函数 占5%。（半路接手代码，人已离职没做交接，反推业务逻辑，找到业务中的关系，对点和边的计算进行优化）
6.操作时：平移拖动影响 占10%，可以用自带属性优化，先渲染点再渲染边，优化5%。

看g6得到：

本来对比了几个别的库，要么因为性能或者功能不如cy，本打算自己尝试学下d3自己写一个的，但是看到了g6有性能测试的能达到图元5w+，只有一点小卡。
他做了：
1.用了最简单的点和线，然后点远大于线。
2.拖拽时，先渲染点再渲染线。
3.单独拖拉节点的性能确实比cy好太多了。
4.没用任何布局算法，直接把坐标放在数据里面。（这个是最重要的！）
5.目前配套的功能确实比cy要少很多，力导布局就没找到没得动效的，为了后期的扩展性还是没有切换g6.
6.总体来说性能比cy更好。

提了个issues：

作者说这就是中小型图元的库，并且提供了几个无关痛痒的优化api。好吧，重点是渲染之前把坐标放进数据来提高性能=>BFF或者是写一个满足布局的算法。

参考d3的力导算法,写一个满足所有点相同大小的布局算法：

core：
1.设置点和线
2.随机定位坐标
3.设置遮挡，边长等参数
4.重复执行力算法直到满足库伦导论
fcose=>力导四叉树优化
单中心：
1.计算但中心点坐标计算
2.得到1后圆环剩余面积阀值对圆环内内圆的影响
3.得到2的规律后，调试一定规律内随机差值以及特殊情况满足部分覆盖
4.每层圆环之间的一定规律随机差值
5.递归1.2.3.4，直到满足视觉要求
多中心：
1.对多中心在可视区域定位坐标，要求互不影响且保持最小可视区域
2.1的前期工作要先计算最大圆半径的影响，但是这样就多递归一次，增加了时间复杂度
3.执行单中心画圆12345
以线思路：
1.先得到最大半径以及单中心坐标
2.以同一坐标系，相同起点以及角度累计半径圆，直到达到最大半径圆
3.递归以每段圆弧内的角度去计算同一坐标系的坐标阀值，直到回到第一条线圆的前一条线坐标最大半径。