antv/g6 节点、及自定义节点

节点

AntV G6 中内置节点支持的通用属性通常包括以下几个：

1. id：节点的唯一标识符。

2. x 和 y：节点的位置坐标。

3. label：节点的标签文本。

4. style：节点的样式，用于设置节点的外观，可以包括填充颜色、边框颜色、线宽等。

5. size：节点的大小。

6. type：节点的形状，表示节点的外观，可以是圆形、矩形等。

7. anchorPoints：指定边连入节点的连接点的位置（相对于该节点而言）。

8. labelCfg：用于定义标签文本的样式和位置，可以包括字体大小、颜色、位置偏移等。

样式属性：
AntV G6 中的节点样式属性（style）用于定义节点的外观，包括填充颜色、边框颜色、线宽等。以下是一些常见的节点样式属性：

1. fill：填充颜色，用于定义节点的背景颜色。

2. stroke：边框颜色，用于定义节点的边框颜色。

3. lineWidth：线宽，用于定义节点的边框宽度。

4. opacity：不透明度，用于定义节点的透明度，取值范围在 0 到 1 之间。

5. radius：节点的半径，仅适用于圆形节点。

6. width 和 height：节点的宽度和高度，仅适用于矩形节点。

7. symbol：节点的图标形状，可以是图标的名称或路径。

8. size：节点的大小，表示节点的半径或宽度/高度，具体取决于节点的形状。

9. endArrow：定义边的末端箭头样式，可以设置箭头的形状和颜色。

10. startArrow：定义边的起始箭头样式，同样可以设置箭头的形状和颜色。

11. lineDash：定义边框的虚线样式，可以创建虚线边框。

这些节点样式属性允许你自定义节点的外观，以满足你的可视化需求。你可以根据节点的形状和具体的设计来设置这些属性。在节点数据中，你可以通过在 style 对象中定义这些属性来自定义节点的样式。例如：

const data = {
   
   
  nodes: [
    {
   
   
      id: 'node1',
      x: 100,
      y: 100,
      size: 20,
      label: 'Node 1',
      labelCfg: {
   
   
        style: {
   
   
          fontSize: 12,
        },
        position: 'bottom',
        offset: 1,
      },
      style: {
   
   
        fill: '#5B8FF9', // 填充颜色
        stroke: '#5B8FF9', // 边框颜色
        lineWidth: 2, // 线宽
        opacity: 0.8, // 不透明度
        size: 40, // 节点大小
        endArrow: {
   
   
          path: 'M 0,0 L 10,5 L 10,-5 Z', // 箭头形状
          fill: '#999', // 箭头颜色
        },
      },
    },
  ],
};

内置节点

G6 提供了一些内置的节点类型，这些节点类型具有不同的形状和样式。以下是一些常见的内置节点类型：

1. circle：圆形节点。

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

2. rect：矩形节点。

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

3. ellipse：椭圆形节点。

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

4. diamond：菱形节点。

const graph = new G6.Graph({
   
   
  container: 'mountNode',
  width: