本文首发于 Nebula Graph Community 公众号
本文整顿自 #可视化 on Live 🔗 主题直播，在本期直播中 3 位可视化嘉宾讲述了他们眼中的可视化，以及他们在可视化我的项目实际中踩过的那些“坑”。
- 卢晓龙：可视化图摸索工具 Nebula Explorer 产品负责人，可视化技术专家；
- 苗壮：可视化图摸索工具 Nebula Explorer 外围开发，可视化技术专家；
- 汪洋：可视化监控运维工具 Nebula Dashboard 产品负责人，可视化技术专家；
可视化是什么？
从集体了解来说的话，可视化便是将咱们平时看到的某些数据或者文字这些绝对形象的货色用正当的形式，比方：图标或者图表，进行二次展现，更不便用户进行交互。简略来说，网页上常见的按钮、图标，比方输出：https://www.baidu.com/ 之后标蓝的“百度一下”按钮，右下角的辅助性能图标，都是一种简略、根底的可视化展现。如果没有这些小图标，你可能须要调用终端执行某条命令能力不便地实现对应操作。而可视化则能大大地升高操作老本以及更容易让用户了解对应操作。
下面的例子，咱们讲到的是 UI 可视化。提到 UI，咱们来读取下十几年前的记忆。大家晓得早年间，电脑技术还不发达，大家看的都是命令行。而当初的话，为什么计算机能飞入寻常百姓家呢？就是因为计算机或者说电脑有了界面，有了 UI，有了合乎人直觉的货色。所以说，能晋升效率的视觉货色就叫做可视化。如果要给一个定义的话，可视化大略有两点：
- 上段例子和 GUI，此类可视化人人可见，但在我看来并非体现可视化的最大亮点；
- 设计，或者是美术，这是可视化的灵魂。因为有了这个货色，它会给可视化赋予生命的意义。艰深来说，一个货色好不好用，往往不是你能把它做进去它就是好用的；但如果它的交互好、体验好、视觉效果好，能合乎人的直觉，开掘进去一些信息，这便算是一个好的可视化。所以说，我认为可视化还是要两局部，一部分是物理意义上的，即第一局部说的渲染，第二局部的话就是它的设计体验，这波及了软硬件。
其实，能够把可视化这个概念分为狭义和广义两个维度来看。
狭义的可视化，能够了解为把一个简单的信息通过肯定的解决，让这个信息更简略、直观出现在用户眼前，让用户更不便地去承受一些信息。这便属于可视化领域，像 GUI，其实它就是一种可视化，把底层的命令通过一种可视化的形式形象进去，让用户能够更不便的和机器做交互。
而广义来说，也就是针对的场景的利用。比如说，随同着互联网的倒退，咱们应答的数据量会越来越大，咱们要把这些数据通过肯定的形式出现进去，出现的成果越好，数据表白也就越好越能被了解。如何在以后硬件存在肯定性能瓶颈的根底上，更流畅地展现更多的数据，可能是以后可视化的意义所在。这么来看，可视化在广义的角度上来看，它可能就是图表、Canvas 动画，或是元宇宙衰亡的 VR 技术、浏览器渲染、3D 渲染，这些可视化可钻研的方向。
具体来说，因为 Nebula 是一款分布式图数据库，咱们提到的可视化更多的是数据可视化。比方，Nebula Dashboard 是一款可视化运维监控产品，在这块的可视化实际不只是图标、动画，更多的是如何把简单的运维信息通过简略的形式，让用户更容易地 Control 集群。
可视化技术
在不同的阶段、不同的场景下，咱们会抉择不同的可视化技术以便更好地服务于产品和业务。
就可视化技术来说，前端展现常见的可视化渲染技术是 SVG、Canvas、CSS 和 WebGL，而用什么货色去画 SVG、Canvas 便是另外一个话题。像 Nebula 社区常提到的 D3，其实并非是一种可视化技术，实质上它是一个可视化算法工具，可在网页上应用也可在终端利用。而 D3 自身有些周边工具去做简略 SVG 封装，这比拟偏下层利用工具，比方像是图表库 ECharts 就是这类。
而 Nebula Dashboard 产品负责人汪洋示意常见可视化渲染技术如上所述的 CSS 和 SVG 等等，会依据所面临的利用场景、计算资源，针对性地定制化开发。比方：为了不便第三方接入，可视化库的设计人员会形象语法、让语法糖更加迷信、标准；对性能要求高的场景，便会去封装工具以便取得高性能。这里他提到了蚂蚁开源的可视化引擎：G2 https://github.com/antvis/g2/，G2 受启发于《The Grammar of Graphics》一书的理念，设计这套基于图形语法实践的可视化底层引擎，G2 的这套语法实现也是业界比拟公认给的科学规范。同其余可视化库相比，G2 在语法设计这块更像是一个残缺的产品。
谈及 G2，可视化图摸索工具 Nebula Explorer 外围开发苗壮示意尽管 G2 语法标准、迷信，然而如果真的要做数据可视化并非是一个非常棘手的可视化工具，因为它基于图形语法实践，须要肯定的专业知识，因而会有肯定的门槛。更多时候，G2 可能还是作为一个可视化图表库被应用而非可视化库。
可视化的性能问题
Nebula Explorer 是一款图摸索工具，单个页面会面临节点数据展现的问题。社区也常有用户问及，单个画布页面能渲染多少个节点数据。针对可视化性能问题，外围产品开发苗壮说到：可视化性能并非是一个相对性能，它往往随同着用户体验。而用户体验和性能某种程度是成反比的，性能越好那用户的体验并非越佳，出现的信息也会绝对较少；而出现更多的数据，则会耗费更多的硬件资源。这便是一项均衡问题。
而进步可视化性能的办法有二：一种是进步硬件配置，之前很风行的梗——分布式并发不够咋整？加台机器，没有什么是加机器解决不了的。但加机器这种简略粗犷的办法非良策，尽管解决了物理限度然而退出了老本问题，除了机器老本还有对应的系统维护老本。一台机器，或者多台机器退出之后必然会带来零碎的复杂度减少。此外，加机器并非是通用解决办法，有些用户不肯定能做到得心应手地增加机器。另外一种是优化算法，相比加机器，办法二更难，自身目前算法都很欠缺，再持续优化也只是边际递加效应。
Nebula 可视化工具的优化实际
Nebula Explorer 优化性能也是从下面两个软硬件方向来开展。硬件方面，不同用户的硬件性能不一样，Explorer 开发过程中会选用比拟好的硬件来实现酷炫特效的出现；而针对硬件性能较差的用户，则提供高画质和一般画质两个模式，自适应适配用户硬件从而达到一个比拟好的出现成果。像 Explorer 的 3D 图摸索模式尽管看过来很酷炫，很“吃”计算资源的样子，然而自身这个性能的硬件要求并非设想中高，任意一台手机的 GPU 配置都能运行 Explorer 3D 模式，相对而言的 CPU 性能更决定用户体验。
其实，除了软硬件上的性能优化，还有产品设计上的策略优化。像是一些比拟难以解决的性能问题，可设法躲避它。性能优化上，有个亘古不变的准则，这个准则就是要保障 1 秒钟渲染 60 帧。即使在非凡场景下，无奈保障一秒钟 60 帧，做到 40 帧数以上也能保证系统的晦涩度。这里就像是 React 的优化实现，它将很多大工作拆解成多个小工作，等零碎闲暇了再塞进去小工作。还有一种思路，如果是代码层面解决不了的问题，能够批改绝对应的交互方式。比方一个长耗时工作，在跑，这时候如果页面不可点击，你会感觉很卡顿对吧？而，这时候退出一个 loading 动画，便会大大地升高用户的期待焦虑，会让用户感觉没那么卡顿。
这里，讲个亲身经历：Nebula Dashboard 刚上线可视化大屏时，踩过的性能坑。可视化大屏刚上线时，只是感觉是个简略大屏可能不会波及太大的性能问题。后果，一上线 CPU 疯狂转，过后就懵逼了：Nebula Dashboard 可视化大屏只有 7、8 个图表。尽管界面酷炫，然而其实整个网络申请也就只有十几个，于是排除了 CPU 在申请计算耗资源过高的问题。此外，大屏上线时，并不存在很多并发状况…通过一轮的排查，最初定位是 SVG 适度耗费资源。所以咱们调整了动画实现计划：对 CPU 要求比拟高的动画，进行降级，缩小渲染次数和渲染频率。这就有点像是图片压缩，你丢一个 1 MB 的图片到压缩网站，压缩完可能是 200 KB，这时候其实用户肉眼是无奈觉察。
可视化技术选型
下面讲到硬件和软件能晋升可视化性能，然而技术选型选的好不好，也能左右你的零碎系能。
在 Nebula Explorer v2.2 版本之前，因为技术选型和业务逻辑组织问题，一旦遇到上百个节点显示问题，便会遭逢卡顿，动画显著不晦涩。之后，便对 Nebula Explorer 进行重构，替换了过后的渲染引擎 G6。G6 是基于 G2 的一套图可视化引擎，可能因为 G6 过于专一业务场景，以及短少高性能场景的验证，在 Nebula Explorer 这边体现差强人意。改用 Force Graph 之后，性能晋升了差不多 10 倍左右。当然并非说 G6 的性能不行，而是 Nebula Explorer 本身的可视化需要和 G6 并不 MATCH。
同 Nebula Explorer 相同，Nebula Dashboard 不存在成千上万的点数据展现，而是数量绝对固定的图表展现以及对应的运维操作执行。监控图表的话，目前来说市场比拟认可的是 Grafana，而 Grafana 自身也是一款开源产品。于是，咱们去钻研了 Grafana 的实现，发现它底层用了轻量级的 uPlot https://github.com/leeoniya/u…。因为 uPlot 是个小于 40kb，特色是绘制工夫序列图，不便做定制化开发。而 Nebula Dashboard 除了监控之外，还有一个比拟重要的性能是针对集群的治理运维操作。这与 Grafana 专一于监控的设定是背离的，加上 Nebula Dashboard 选型的三个规范是：第一，易开发上手；第二，开源社区沉闷；第三，根底库多可晋升开发效率。最终，选用 G2 作为 Nebula Dashboard 的可视化底层工具，以便进步开发效率。
可视化产品设计
Nebula Explorer 有 2D 和 3D 两种图摸索模式，当中波及了页面如何布局的问题。在 Nebula Explorer 设计中，采纳算法来实现特定点群的聚合和散列；以及全图鸟瞰模式在 3D 模式中进行展现，因为支流的电脑为 1920*1080，一个立体最多展现百万个像素点，而后这时候换个角度，咱们采纳 3D 模式所能出现的数据便会比 2D 多。
可视化小常识
对于渲染
VR、监控指标、多点展现，在计算底层渲染时渲染图形的形式大多雷同。举个例子，有些计算机系统应用 OpenGL 技术渲染的 3D 图形是由若干个三角形（triangle）拼接而成，而 Nebula Explorer 计算渲染方面也是如此，即，你看到的一个球形节点，其实是由若干个三角形形成并线性插值了不同的顶点色彩。除计算机的光栅化绘图法之外，近几年风行的光线追踪渲染也是一门成果较好的渲染技术，该技术利用光线射出，反射，损耗的物理模仿形式，失去像素点的最终色彩，在视觉上会更靠近真实世界。
交换图数据库技术？退出 Nebula 交换群请先填写下你的 Nebula 名片，Nebula 小助手会拉你进群~~