内置的Node

image.png

G6 默认提供的节点仅提供了一个图形,一个文本的实现,下面表格中显示了内置的各类节点,同时对一些特殊的字段进行了说明:

名称

描述

circle

圆形:

  • size 是单个数字,表示直径
  • 圆心位置对应节点的位置
  • color 字段默认在边上生效
rect

矩形:

  • size 是数组,例如:[100, 50]
  • 矩形的中心位置是节点的位置,而不是左上角
  • color 字段默认在边上生效

ellipse

椭圆:

  • size 是数组,表示椭圆的长和宽
  • 椭圆的圆心是节点的位置
  • color 字段默认在边上生效

image

图片:

  • size 是数组,表示图片的长和宽
  • 图片的中心位置是节点位置
  • img 图片的路径,也可以在 style 里面设置
  • color 字段不生效

所有内置的图形都支持的属性:


⚠️注意:


自定义节点时候,可用的属性,请参考G 图形Shape文档


内置的Edge

image.pngimage.png


G6 内置的边也都支持一条线,一个文本,下面表格中列出所有内置的边,以及特殊属性的说明:

名称

描述

line

连接两个节点的直线:

  • controlPoints 不生效
polyline

多段线段构成的折线,连接两个端点:

  • controlPoints 表示所有线段的拐点,不指定时显示成直线

quadratic

只有一个控制点的曲线:

  • controlPoints 不指定时,会默认线的一半处弯曲

cubic

有两个控制点的曲线:

  • controlPoints 不指定时,会默认线的 1/3, 2/3 处弯曲

cubic-vertical

垂直方向的三阶贝塞尔曲线,不考虑用户从外部传入的控制点

cubic-horizontal

水平方向的三阶贝塞尔曲线,不考虑用户从外部传入的控制点

loop

自环


内置的边的都支持的通用属性有:


折线 polyline

折线采用了 A* 算法,自动寻找两个节点之间最优的弯折方式。在通用属性基础上,支持了特殊的配置。在 style 图形的样式中可以配置两个 polyline 的特有属性:


用法

实例化图时全局配置:

const graph = new G6.Graph({
  container: 'mountNode',
  width: 500,
  height: 500,
  defaultEdge: {
    shape: 'polyline',
    ...             // 其他配置
    style: {
      radius: 5,
      offset: 30,
      ...            // 其他通用样式配置
    }
  },
  ...                // 其他配置项
});


在数据中配置:

const data = {
  nodes: [
    ... // 节点
  ],
  edges: [{
    id: 'edge0',
    source: node,
    target: node,
    shape: 'polyline',
    style: {
      radius: 5,
      offset: 30
    }
  },
  ... // 其他边
  ]
}


在动态增加节点时配置:

const edge = graph.addItem('edge', { 
  id: 'edge0',
  source: node,
  target: node,
  shape: 'polyline',
  style: {
    radius: 5,
    offset: 30
  }
});


自环 loop

自环是指连接单个节点自身的边,是一种边的特殊情况,因此,在通用属性基础上,支持了特殊的配置。

loopCfg: 


用法

在数据中配置:

const data = {
  nodes: [
    ... // 节点
  ], edges: [{
    id: 'edge0',
    source: node,
    target: node,
    shape: 'loop',
    loopCfg: {
      position: 'top',
      clockwise: true
    }
  },
  ... // 其他边
  ]
}


在动态增加节点时配置:

const edge = graph.addItem('edge', { 
  id: 'edge0',
  source: node,
  target: node,
  shape: 'loop',
  loopCfg: {
    position: 'top',
    clockwise: true
  }
});


通过以上配置可以得到一个节点顶部的自环:

屏幕快照 2019-03-20 上午10.26.09.png



最佳实践

image.pngimage.png


自定义边时候,可用的属性,请参考G 图形Shape文档