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',
      },
    },
  },
});