自定义内容

由于 G6 本身的功能不足以支撑现有业务功能开发,所以需要自定义一部分内容来实现

自定义节点open in new window

由于 G6 的内置节点 circleimage 都无法实现我们现在想要的效果,circle 中的图片无法裁剪为圆形,image 中裁剪后的节点鼠标移入无法加上边框,通过 custom-node.jsopen in new window 实现

setState

节点 的其他状态发生改变时,需要根据是否本身处于某个状态进行设置

draw

绘制节点时,需要判断此节点是否是 关系视图 下的 节点,需要不同的样式以及交互

update

更新需要针对 关系视图 下当点击了 + 或者 - 展开收缩视图

自定义交互open in new window

G6 除了提供丰富的 内置交互行为 Behavior 外,还提供了自定义交互行为的机制,方便用户开发更加定制化的交互行为。通过 custom-behavior.jsopen in new window 实现

添加关系 click-add-edge(暂未使用)

添加两个节点之间的关系

拖动节点移动相邻无关系节点 drag-node-move-source-neighbors

G6 本身没有这个内置交互,所以这里需要自定义实现该功能

鼠标移入节点高亮相关联节点 activate-relations-custom

由于 G6 中的 activate-relations内置交互,数据量过大有性能问题,所以这里自定义一个鼠标移入高亮相邻节点

上次更新:
贡献者: zml