内置节点总览

G6 默认提供的节点是一个基础图形加一个文本图形的实现。可选的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect，这些内置节点的默认样式分别如下图所示。

内置节点类型说明

下面表格中显示了内置的各类节点，同时对一些特殊的字段进行了说明：

名称	描述	默认示例
circle	圆形：- size 是单个数字，表示直径- 圆心位置对应节点的位置- color 字段默认在描边上生效- 标签文本默认在节点中央- 更多字段见 circle 节点的配置
rect	矩形：- size 是数组，例如：[100, 50]- 矩形的中心位置是节点的位置，而不是左上角- color 字段默认在描边上生效- 标签文本默认在节点中央- 更多字段见 rect 节点的配置
ellipse	椭圆：- size 是数组，表示椭圆的长和宽- 椭圆的圆心是节点的位置- color 字段默认在描边上生效- 标签文本默认在节点中央- 更多字段见 ellipse 节点的配置
diamond	菱形：- size 是数组，表示菱形的长和宽- 菱形的中心位置是节点的位置- color 字段默认在描边上生效- 标签文本默认在节点中央- 更多字段见 diamond 节点的配置
triangle	三角形：- size 是数组，表示三角形的长和高- 三角形的中心位置是节点的位置- color 字段默认在描边上生效- 标签文本默认在节点下方- 更多字段见 triangle 节点的配置
star	星形：- size 是单个数字，表示星形的大小- 星星的中心位置是节点的位置- color 字段默认在描边上生效- 标签文本默认在节点中央- 更多字段见 star 节点的配置
image	图片：- size 是数组，表示图片的长和宽- 图片的中心位置是节点位置- img 图片的路径，也可以在 style 里面设置- color 字段不生效- 标签文本默认在节点下方- 更多字段见 image 节点的配置
modelRect	菱形：- size 是数组，表示菱形的长和宽- 菱形的中心位置是节点的位置- color 字段默认在描边上生效- 标签文本默认在节点中央- 若有 description 字段则显示在标签文本下方显示 description 内容- 更多字段见 modelRect 节点的配置

节点的通用属性

所有内置的节点支持的通用属性：

样式属性 style

Object 类型。通过 style 配置来修改节点的填充色、边框颜色、阴影等属性。下表是 style 对象中常用的配置项：

下面代码演示在实例化图时全局配置方法中配置 style：

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    // ... 其他属性
    style: {
      fill: '#steelblue',
      stroke: '#eaff8f',
      lineWidth: 5,
      // ... 其他属性
    },
  },
});

标签文本 label 及其配置 labelCfg

label String 类型。标签文本的文字内容。labelCfg Object 类型。配置标签文本。下面是 labelCfg 对象中的常用配置项：

上表中的标签的样式属性 style 的常用配置项如下：

下面代码演示在实例化图时全局配置方法中配置 label 和 labelCfg。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    // ... 其他属性
    label: 'node-label',
    labelCfg: {
      position: 'bottom',
      offset: [10, 10, 10, 10],
      style: {
        fill: '#666',
      },
    },
  },
});

节点的配置方法

配置节点的方式有三种：实例化图时全局配置，在数据中动态配置，使用 graph.node(nodeFn) 函数配置。这几种配置方法可以同时使用，优先级：

使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置

即有相同的配置项时，优先级高的方式将会覆盖优先级低的。

实例化图时全局配置

用户在实例化 Graph 时候可以通过 defaultNode 配置节点，这里的配置是全局的配置，将会在所有节点上生效。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    shape: 'circle',
    // 其他配置
  },
});

在数据中动态配置

如果需要为不同节点进行不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

const data = {
  nodes: [{
    id: 'node0',
    size: 100,
    shape: 'rect',
    ...    // 其他属性
    style: {
      ...  // 样式属性，每种节点的详细样式属性参见各节点文档
    }
  },{
    id: 'node1',
    size: [50, 100],
    shape: 'ellipse',
    ...    // 其他属性
    style: {
      ...  // 样式属性，每种节点的详细样式属性参见各节点文档
    }
  },
    ... // 其他节点
  ],
  edges: [
    ... // 边
  ]
}

使用 graph.node(nodeFn) 配置

该方法可以为不同节点进行不同的配置。提示：

• 该方法必须在 render 之前调用，否则不起作用；
• 由于该方法优先级最高，将覆盖其他地方对节点的配置，这可能将造成一些其他配置不生效的疑惑；
• 该方法在增加元素、更新元素时会被调用，如果数据量大、每个节点上需要更新的内容多时，可能会有性能问题。

// const data = ...
// const graph = ...
graph.node((node) => {
  return {
    id: node.id,
    shape: 'rect',
    style: {
      fill: 'blue'
    }
  }
});
graph.data(data);
graph.render();

实例演练

const data = {
  nodes: [{
    x: 100,
    y: 100,
    shape: 'circle',
    label: 'circle',
 },{
    x: 200,
    y: 100,
    shape: 'rect',
       label: 'rect',
 },{
    id: 'node-ellipse',
    x: 330,
    y: 100,
    shape: 'ellipse',
       label: 'ellipse'
 },{
    id: 'node-diamond',
    x: 460,
    y: 100,
    shape: 'diamond',
       label: 'diamond'
 },{
    id: 'node-triangle',
    x: 560,
    y: 100,
    //size: 80,
    shape: 'triangle',
       label: 'triangle'
 },{
    id: 'node-star',
    x: 660,
    y: 100,
    //size: [60, 30],
    shape: 'star',
       label: 'star'
 },{
    x: 760,
    y: 100,
    size: 50,
    shape: 'image',
    img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
       label: 'image',
 },{
    id: 'node-modelRect',
    x: 900,
    y: 100,
    shape: 'modelRect',
       label: 'modelRect'
 }]
};
const graph = new G6.Graph({
    container: 'mountNode',
  width: 1500,
  height: 300
});
graph.data(data);
graph.render();

显示结果：

• triangle 节点和 image 节点的标签文本默认位置为：position:'bottom' ，其他节点文本的默认位置都为：position: 'center'；

调整节点配置

下面演示通过将配置写入数据的方式，调整 id 为 'node-ellipse' 的椭圆节点的文本位置，颜色和样式。将下面代码替换上面代码中 id 为 'node-ellipse' 的节点数据即可生效。

{
  id: 'node-ellipse',
  x: 330,
  y: 100,
  shape: 'ellipse',    
  size: [60, 30],
  label: 'ellipse',
  labelCfg: {
    position: 'bottom',
    offset: 5
  },
  style: {
    fill: '#fa8c16',
    stroke: '#000',
    lineWidth: 2
  }
}

再为 id 为 'node-modelRect' 的 modelRect 节点添加描述文字，使用下面代码替换 id 为 'node-modelRect' 的节点数据即可得到带有内容为 '描述文本xxxxxxxxxxx' 的 modelRect 节点。

{
  id: 'node-modelRect',
  x: 900,
  y: 100,
  description: '描述文本xxxxxxxxxxx',
  shape: 'modelRect',
  label: 'modelRect'
}

相关阅读

• 状态 State —— 交互过程中的样式变化。