ellipse

G6 内置了 ellipse 节点,其默认样式如下。标签文本位于椭圆中央。 ellipse - 图1

使用方法

内置节点 一节所示,配置节点的方式有两种:实例化图时全局配置,在数据中动态配置。

1 实例化图时全局配置

用户在实例化 Graph 时候可以通过 defaultNode 指定 shape'ellipse',即可使用 ellipse 节点。

  1. const graph = new G6.Graph({
  2. container: 'mountNode',
  3. width: 800,
  4. height: 600,
  5. defaultNode: {
  6. shape: 'ellipse',
  7. // 其他配置
  8. },
  9. });

2 在数据中动态配置

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

  1. const data = {
  2. nodes: [{
  3. id: 'node0',
  4. shape: 'ellipse',
  5. ... // 其他配置
  6. },
  7. ... // 其他节点
  8. ],
  9. edges: [
  10. ... // 边
  11. ]
  12. }

配置项说明

ellipse 节点支持以下的配置项,对于 Object 类型的配置项将在后面有详细讲解:

名称含义类型备注
size椭圆的大小NumberArray
style椭圆的默认样式ObjectCanvas支持的属性
labelCfg文件配置项Object
stateStyles各状态下的样式Object只对keyShape起作用
linkPoints椭圆上的链接点Object默认不显示
icon椭圆上icon配置Object默认不显示icon

样式属性 style

Object 类型。通过 style 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style,使之达到如下图效果。ellipse - 图2

  1. const data = {
  2. nodes: [
  3. {
  4. x: 100,
  5. y: 100,
  6. shape: 'ellipse',
  7. label: 'ellipse',
  8. },
  9. ],
  10. };
  11. const graph = new G6.Graph({
  12. container: 'mountNode',
  13. width: 800,
  14. height: 600,
  15. defaultNode: {
  16. // shape: 'ellipse', // 在数据中已经指定 shape,这里可以不用再此指定
  17. size: [130, 80],
  18. style: {
  19. fill: '#bae637',
  20. stroke: '#eaff8f',
  21. lineWidth: 5,
  22. },
  23. },
  24. });
  25. graph.data(data);
  26. graph.render();

标签文本配置 labelCfg

Object 类型。通过 labelCfg 配置标签文本。基于上面 样式属性 style 中的代码,下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置,使之达到如下图效果。ellipse - 图3

  1. const data = {
  2. // ... data 内容
  3. };
  4. const graph = new G6.Graph({
  5. // ... 图的其他属性
  6. defaultNode: {
  7. // ... 节点其他属性
  8. labelCfg: {
  9. offset: 20,
  10. style: {
  11. fill: '#9254de',
  12. fontSize: 18,
  13. },
  14. },
  15. },
  16. });
  17. // ...

边的连入点 linkPoints

Object 类型。通过配置 linkPoints ,可以指定节点上「上、下、左、右」四个方向上边的连入点。

名称含义类型备注
top是否显示上部的连接点Boolean默认为false
bottom是否显示底部的连接点Boolean默认为false
left是否显示左侧的连接点Boolean默认为false
right是否显示右侧的连接点Boolean默认为false
size连接点的大小Number默认为3
fill连接点的填充色String默认为#72CC4A
stroke连接点的边框颜色String默认为#72CC4A
lineWidth连接点边框的宽度Number默认为1

基于上面 样式属性 style 中的代码,下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置,使之达到如下图效果。ellipse - 图4

  1. const data = {
  2. // ... data 内容
  3. };
  4. const graph = new G6.Graph({
  5. // ... 图的其他属性
  6. defaultNode: {
  7. // ... 节点其他属性
  8. linkPoints: {
  9. top: true,
  10. bottom: true,
  11. left: true,
  12. right: true,
  13. size: 5,
  14. fill: '#fff',
  15. },
  16. },
  17. });
  18. // ...

图标 icon

Object 类型。通过配置 icon,可以在圆上显示小图标。

名称含义类型备注
show是否显示iconBoolean默认为false,不显示
widthicon的宽度Number默认为16
heighticon的高度Number默认为16
imgicon的地址String

基于上面 样式属性 style 中的代码,下面代码在 defaultNode 中增加了 icon 配置项进行图标的配置,使之达到如下图效果。ellipse - 图5

  1. const data = {
  2. // ... data 内容
  3. };
  4. const graph = new G6.Graph({
  5. // ... 图的其他属性
  6. defaultNode: {
  7. // ... 节点其他属性
  8. icon: {
  9. show: true,
  10. },
  11. },
  12. });
  13. // ...