antv/G6 琐碎点

• fitView
  fitView ：为了能够将超出画布的图适配到视野中，在实例化图时使用了 fitView 配置项

const graph = new G6.Graph({
  // ...
     fitView: true,
  // fitViewPadding: [ 20, 40, 50, 20 ]
});

复杂的布局系统会打破适配的规则，所以去掉

• type: 'force'，即经典力导向图布局。preventOverlap: true` ，表示希望节点不重叠。

• 布局modes

modes: {
             default: [
                    'drag-canvas', 'drag-node', 'zoom-canvas',] //拖拽画布,拖拽节点,缩放画布 
}

type: 'force'，即经典力导向图布局。preventOverlap: true ，表示希望节点不重叠。

边动画 type加在默认边上

• 原点沿边移动 type: 'circle-running',
• 虚线移动 type: 'line-dash',
• 从无到有边 type: 'line-growth'

defaultEdge: {

             type: 'circle-running', //
}

linkDistance 属性用来指定布局的时候边的距离长度：

const graph = new G6.Graph({
  // ...
  layout: {
    type: 'force',
    preventOverlap: true,
    linkDistance: 100, // 指定边距离为100
  },
});

节点样式调整

文档

• 样式默认为圆形，circle

  defaultNode：{
      type:'modelRect'    //卡片
  }

样式详解

名称	描述
circle	圆形
rect	矩形
ellipse	椭圆
diamond	菱形
triangle	三角形
star	星形
image	图片
modelRect	卡片
donut	圆形

标签文本label配置

文本默认是在节点中间，但是被要求弄在节点下面，扒拉了下文档还真找到了

名称	是否必须	类型	备注
position	false	String	文本相对于节点的位置，目前支持的位置有：'center'，'top'，'left'，'right'，'bottom'。默认为 'center'。modelRect 节点不支持该属性
offset	false	Number	文本的偏移，position 为 'bottom' 时，文本的上方偏移量；position 为 'left' 时，文本的右方偏移量；以此类推在其他 position 时的情况。modelRect 节点的 offset 为左边距
style	false	Object	标签的样式属性。

示例；

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