本文主要介绍如何使用可视化库gojs以及使用时的提示。边肖认为这很好。现在分享给大家，给大家一个参考。来和边肖一起看看吧。
: 目录
1.GoJS 2简介。GoJS 3的应用场景。为什么选择GoJS: 4。如何入门GoJS 5？小贴士(非常实用)6。练习：最终实现节点分组关系的可视化交互图
1. gojs 简介
Gojs是一个用于构建交互式可视化图表的js库。通过使用可定制的模板和布局来构建复杂的节点、链接和组，以便构建简单到复杂的图表，例如流程图、脑图、组织图、甘特图等。而且还为用户交互提供了许多高级功能，如拖放、复制粘贴和就地文本编辑。
Gojs是诺斯伍兹软件公司的产品。Northwoods Software成立于1995年，专注于交互式图形控件和类库。它的愿景是提供优秀的图形用户界面。目前已经成长为跨各种平台的交互式图形组件和类库的世界级供应商。
2. gojs 应用场景
基于gojs的高度可构造性，可以绘制多种可视化图表：
流程图，脑图，树形图，甘特图，直方图，饼图，地图，仪表板，更多的例子(数百)
3. 为什么选用 gojs:
视觉库有很多，比如：echarts，highcharts，antv系列，d3，还有今天的主角gojs，
根据可自定义绘图的程度进行排序：
gojs、d3js antv echarts、highcharts
如果需求比较简单，不需要自定义图元素，那么echarts和highcharts可以选择哪个库选择自己喜欢的演示效果。
如果需要一定程度的自定义图元素，可以看看antv g2/g6 demo是否能满足要求，大部分图元素都可以自定义。
如果以上都不能解决你的需求，那么它就是高度可定制的。可以考虑d3js和gojs，或者先去试玩，哪个更贴近你的需求就采用哪个。
总结：gojs可定制性强，非常适合复杂需求的图形交互。
4. gojs 上手指南
查看案例：样本
目的是对gojs能做什么有个大概的了解，找到并确认哪种案例效果更贴近自己的需求。可以参考案例代码完成需求，事半功倍。也是非常好的入门参考。看了一两个案例代码，也能对gojs画图有个基本的了解。
关键概念
在看完案例代码，对gojs画图有了基本了解之后。在画图之前了解画图的概念和结构会更有帮助。这就好比在写之前就知道了提纲，写作思路会更清晰，效率也会更高。
开始画基本的演示
该库通过引用在页面中创建一个gojs图表容器，并设置容器的宽度和高度，否则无法绘制图形。创建图表实例，定义布局、样式、交互、属性、事件等。(可以省略)，绑定数据，渲染图表。
//图表容器
div id= myDiagramDiv style= height:600 px；宽度：100%；边框：1px纯黑/div
//引用
script src= https://UNP kg . com/gojs/release/go-debug . js /script
脚本
//创建图表实例
var $=go。GraphObject.make
var图=新go。图表( myDiagramDiv )；
//绑定数据
diagram.model=new go。图表链接模型(
[//节点
{ key: Alpha ，color:浅蓝色 }，
{键： Beta ，颜色：橙色 }，
{ key: Gamma ，color:浅绿色 }，
{ key: Delta ，color: pink }
],
[//连接
{从： Alpha ，到： Beta }，
{从： Alpha ，到： Gamma }，
{从： Beta ，到： Beta }，
{从：伽玛，到：德尔塔 }，
{从： Delta ，到： Alpha }
]
);
/脚本
如果要控制布局、样式、节点、组、连接、事件等。可以自定义相应的模板。以节点为例：
//节点模板描述如何构造每个节点
diagram.nodeTemplate=$(go。节点，“自动”，
$(走。形状，“圆形矩形”，新的go。绑定( fill ， color )，
$(走。TextBlock，新的go。绑定(文本，键))
);
更多：指南、api
5. 小技巧（非常实用哦）
去掉水印。图表绘制完成后，左上角默认有库信息的水印。
搜索7eba17a4ca3b1a8346的源代码，找到这个位置：
a . yr=b . V[Ra( 7 EBA 17 a4 ca 3 B1 a 8346 )][Ra( 78 a 118 b 7 )](b . V，Kk，4，4)；
或者删除代码并将其更改为以下内容：
a . yr=function(){ return true；};
e导入Gojs:请参考加载gojs。
因为上面要去掉水印，必须下载库源代码，现在的前端项目基本都是基于es6模块来组织文件。
因此，有必要下载go-module.js，以便将其引入到所需的文件中：
从导入*。/go-module . js ；
另外，由于go-module.js已经打包，可配置打包排除了这个文件的打包，减少了打包时间。以webpack为例，修改如下：
{
测试：/。js$/，
装载机：“巴别塔装载机”，
包括：[resolve(src )、resolve(test)]，
exclude:[resolve( src/assets/lib/)]//所有打包的库都放在这个目录中。
}
移除蓝色边框：点击图表，你会看到图表有一个蓝色边框。Css帮助：图表画布{
边框：无；
大纲：无；
}
图表是图表容器的类名。
6. 实践：实现节点分组关系可视化交互图
要求：能正确显示组的层次结构和节点之间的关系。并实现交互：单个节点，多个节点，获取节点信息选择群组，选择群组中的节点，获取群组中的节点信息选择节点，当前节点作为根节点，可以选择所有连接到根节点的节点，可以获取节点信息后端获取的接口数据：
接口数据
常量数据={
属性:[
{key: T-2272 ， Parentkey: J-1051 ， name: haha}，
{ key: p-344 ， parentKey: g - 1586357764 ， name: test }，
{key: t-2271 ， parent key: j-1051 ， name: query}，
{ 键: t-2275 ，父键: j-1052 ，名称:快乐 }，
{key: j-1054 ， parent key: p-344 ， name :嘻嘻 }，
{key: t-2274 ， parent key: j-1052 ， name: query}，
{ key: j-1051 ， parentKey: p-444 ， name: hello }，
{ 键: j-1052 ，父键: p-444 ，名称:编辑 }，
{key: t-2281 ， parent key: j-1054 ， name :嘻嘻 }，
{ key: p-444 ， parentKey: g - 1586357624 ， name: test }，
{key: g-1586357624 ， name :数据组1}，
{key: g-1586357764 ， name :数据组2}，
{key: t-2273 ， parent key: j-1051 ， name: new}
],
依赖关系:[
{ sourceKey: t-2272 ， targetKey: t-2274 }，
{ sourceKey: t-2274 ， targetKey: t-2275 }，
{ sourceKey: t-2273 ， targetKey: t-2272 }，
{ sourceKey: t-2271 ， targetKey: t-2272 }，
{ sourceKey: t-2272 ， targetKey: t-2281 }
]
}
参见gojs演示：分组、导航
最后
实现效果的思路下次分享。如果有兴趣，可以利用数据，借鉴参考demo和本文分享的知识，自己去实现。
我也是新手(之前没接触过gojs)终于有成果了。如果本文有什么不足或错误，或者好的评论，请指出。
非常感谢！
这篇关于交互式可视化js库gojs的介绍和技巧的文章到此为止。希望对大家的学习有帮助，也希望大家多多支持。
