一、使用授权

• 网站上提供下载和展示的版本是试用版 有水印、时间限制（最多6个月-从发布日起)

• 正式商用: 需购买授权，获取功能无限制的专业版本和技术服务, 授权时间：永久。

• 用于公益非盈利并且面向社会公开的: 国家科研、教育机构可申请免费版。

二、Vue使用问题

** 很重要一点儿：应避免在Vue的data中绑定jtopo相关对象 **

• Vue组件的data里非常适合绑定 数据，但jtopo相关的对象不是 数据，被vue劫持后的性能会大幅下降，出现意想不到的可能。

三、自定义属性

• 如果需要在节点或者连线上添加自定义的属性, 方法如下：

// 定义数据对象 (v2.4.0之前用的是:userData，以后版本用更简化的: data)
node.data = {id: 'xxx', foo:'bar'};

node.data = {myId: 'uuid_xxx', type:'交换机'};

// data 里应该存放一些纯数据，可以被序列化和反序列化（JSON读取和恢复）

除了data外，还有两个属性是专门留给开发人员自定义使用的：

// name 和 type 

// name 在序列化和反序列中，作用类似变量、或者当做业务上的唯一id都是可以的
node.name = 'var_name';

// type 自定义节点时，区分不同类型
node.type = 'Host';'

layer.querySelector('[name="var_name"]');
layer.querySelectorAll('[type="Host"]');

• 避免直接在对象上增加属性，这样避免了属性冲突和一些奇怪的问题，也便于以后升级

四、注意事项

浏览器自带了一个对象名字叫 Node, 和jtopo里的Node重名。

记得从'@jtopo/core'导入Node，否则编译的时候正常，但运行时可能报错。

// 忘记导入的时候
console.log(Node === window.Node); // true

// 导入后
import { Node } from '@jtopo/core';
console.log(Node === window.Node); // false

五、性能优化建议

• 尽量减少画布上显示的对象个数（效果极为明显）;

  数据量较多时可以考虑：滚动展示 + 搜索功能

• 定义的样式越简单、越少性能越好

• 减少文本信息，文字的渲染非常耗时;

  a) 允许的话，先把文字隐藏，鼠标指向时再显示（效果非常明显）

  b) 可以考虑事先用画图软件把文字绘制到节点图片上（效果非常明显）

• 可以使用SVG作为图片，但性能比较差;

  事先把SVG转成png图片会更好

• 当画面不够流畅时，放弃阴影效果 也可以考虑预先制作好有阴影效果的png

• 火狐浏览器渲染阴影的速度极慢（火狐浏览器中慎用）

• 避免使用多个Layer

  a) 多个Layer会造成性能的明显下降

  b) 系统复杂度会明显提升

  绝大多数情况下，可以使用Node嵌套，将Node当做容器使用来代替解决。

• 批量添加图元对象 如果节点数量太多, 批量添加性能会大幅提升:

// 性能较慢
for(...){
    layer.addChild(obj);
}

最佳实践, 一次性添加多个, 如下:

let objArr = [];
for(...){
    objArr.push(obj); 
}
layer.addChilds(objArr);