自定义内容
由于 G6
本身的功能不足以支撑现有业务功能开发,所以需要自定义一部分内容来实现
自定义节点
由于 G6
的内置节点 circle
和 image
都无法实现我们现在想要的效果,circle
中的图片无法裁剪为圆形,image
中裁剪后的节点鼠标移入无法加上边框,通过 custom-node.js 实现
setState
当 节点
的其他状态发生改变时,需要根据是否本身处于某个状态进行设置
draw
绘制节点时,需要判断此节点是否是 关系视图
下的 节点,需要不同的样式以及交互
update
更新需要针对 关系视图
下当点击了 +
或者 -
展开收缩视图
自定义交互
G6 除了提供丰富的 内置交互行为 Behavior 外,还提供了自定义交互行为的机制,方便用户开发更加定制化的交互行为。通过 custom-behavior.js 实现
添加关系 click-add-edge(暂未使用)
添加两个节点之间的关系
拖动节点移动相邻无关系节点 drag-node-move-source-neighbors
G6
本身没有这个内置交互,所以这里需要自定义实现该功能
鼠标移入节点高亮相关联节点 activate-relations-custom
由于 G6
中的 activate-relations
内置交互,数据量过大有性能问题,所以这里自定义一个鼠标移入高亮相邻节点