本章介绍的内容将在3.0.8版本中发布。

草稿文档

定义节点时设定

在自定义节点时，通过options字段指定各个状态下的样式及属性值，需要特别说明的一点是，除默认状态外，其他状态是对keyShape起作用。

  1. // 带有图标的圆，可用于拓扑图中
  2. G6.registerNode('circleIcon', {
  3.   // 自定义节点时的配置
  4.   options: {
  5.     // 默认配置
  6.     default: {
  7.       r: 20,
  8.       fill: '#40a9ff',
  9.       stroke: '#91d5ff',
  10.       lineWidth: 1,
  11.       x: 0,
  12.       y: 0,
  13.       // 文本样式配置
  14.       labelCfg: {
  15.         style: {
  16.           fill: '#595959'
  17.         }
  18.       },
  19.       // 节点中icon配置
  20.       icon: {
  21.         // 是否显示icon，值为 false 则不渲染icon
  22.         show: true,
  23.         // icon的地址，可以是字符串或Image
  24.         img: Icon,
  25.         width: 16,
  26.         height: 16
  27.       }
  28.     },
  29.     // 鼠标hover状态下的配置
  30.     hover: {
  31.       lineWidth: 3
  32.     },
  33.     // 选中节点状态下的配置
  34.     select: {
  35.       lineWidth: 5
  36.     }
  37.   },
  38.   // 文本位置
  39.   labelPosition: 'bottom',
  40.   drawLabel(cfg, group) {
  41.     const customStyle = this.getCustomConfig(cfg) || {};
  42.     const defaultConfig = customStyle.default || {};
  43.     const labelCfg = deepMix({}, this.options.default.labelCfg, defaultConfig.labelCfg, cfg.labelCfg);
  44.     const labelStyle = this.getLabelStyle(cfg, labelCfg, group);
  45.     const label = group.addShape('text', {
  46.       attrs: labelStyle
  47.     });
  48.     return label;
  49.   },
  50.   drawShape(cfg, group) {
  51.     const customStyle = this.getCustomConfig(cfg) || {};
  52.     const defaultConfig = customStyle.default;
  53.     // const { icon, ...circleStyle } = defaultConfig;
  54.     const attrs = deepMix({}, this.options.default, defaultConfig, cfg.style);
  55.     const keyShape = group.addShape('circle', {
  56.       attrs
  57.     });
  59.     const { icon } = attrs;
  60.     const { width, height } = icon;
  61.     const image = group.addShape('image', {
  62.       attrs: {
  63.         x: -width / 2,
  64.         y: -height / 2,
  65.         ...icon
  66.       }
  67.     });
  69.     image.set('capture', false);
  71.     return keyShape;
  72.   }
  73. }, 'circle');

默认效果
image.png

触发各状态

通过上面的方式定义完节点以后，如果要触发这个状态，则只需要通过以下方式即可：

  1. graph.on('node:mouseenter', evt => {
  2.     const { item } = evt
  3.   graph.setItemState(item, 'hover', true)
  4. })
  6. graph.on('node:mouseleave', evt => {
  7.     const { item } = evt
  8.   graph.setItemState(item, 'hover', false)
  9. })

重点说明 自定义节点或基于内置节点修改时，配置各个状态下的样式，然后根据具体业务执行graph.setItemState(item, 'stateName', true)即可。
**

扩展内置节点

当内置的节点不能满足需求时，可以通过getCustomConfig()或getStateStyle()方法实现。

基于内置节点circleIcon来扩展。

  1. G6.registerNode('shadowCircle', {
  2.     getCustomConfig() {
  3.       return {
  4.         default: {
  5.           shadowOffsetX: 0,
  6.           shadowOffsetY: 0,
  7.           shadowBlur: 10,
  8.           shadowColor: '#e6f7ff',
  9.           lineWidth: 5,
  10.           icon: {
  11.             show: false
  12.           }
  13.         }
  14.       }
  15.     }
  16.   }, 'circleIcon')
  18.   G6.registerNode('stateCircle', {
  19.     getStateStyle(name, value, item) {
  20.       // 这里可以根据item判断，返回不同类型的style
  21.       return {
  22.         fill: 'green',
  23.         stroke: '#000',
  24.         lineWidth: 5
  25.       }
  26.     }
  27.   }, 'circleIcon')

从默认效果扩展出来的效果：

  • node2：改变circle大小、颜色、icon大小及文本颜色；
  • node3：改变circle的背景色，不显示icon。

image.png
node4为默认效果，5-9为扩展出来的效果。
image.png