G6 3.1 升级指南

从 G6 3.0.x 版本升级到 3.1.0 版本时的注意事项。

不再支持 nodeStyle 和 edgeStyle

G6 3.1 版本中实例化 Graph 时，新增了 **nodeStateStyles** 及 **edgeStateStyles** 两个配置项，删除了 nodeStyle 和 edgeStyle ，使用 3.1 以下版本的同学，只需要将 nodeStyle 改成 nodeStateStyles ，将 edgeStyle 改成 edgeStateStyles ，配置写法上稍有变化。

旧的写法

G6 3.1.0 版本之前的写法是，初始的状态既可以在 defaultNode、defaultEdge 中通过 style 定义，也可以在 nodeStyle 和 edgeStyle 中通过 default 定义，交互状态和业务状态在 nodeStyle 和 edgeStyle 中通过 styles 来定义。这样在使用中就会造成一定的困扰，究竟该使用哪种方式，styles 又是什么意思？开发者就会产生很大疑惑。

const graph = new G6.TreeGraph({
  container: 'mountNode',
  width: 1000,
  height: 800,
  defaultNode: {
    size: 16,
    anchorPoints: [[0, 0.5], [1, 0.5]]
  },
  defaultEdge: {
    shape: 'cubic-horizontal'
  },
  nodeStyle: {
    default: {
      fill: '#40a9ff',
      stroke: '#096dd9'
    },
    styles: {
        hover: {
        opacity: 0.6
      }
    }
  },
  edgeStyle: {
    default: {
      stroke: '#A3B1BF'
    },
    styles: {
        hover: {
        opacity: 0.6
      }
    }
  }
});

新的写法

G6 3.1.0 版本中，统一了定义的方式：

• 默认的样式在 defaultNode 和 defaultEdge 中通过 style 定义；
• hover、 selected 等交互和业务状态在 nodeStateStyles 和 edgeStateStyles 中定义。

这样一来就很明显了，也不会产生不必要的疑惑和困扰。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  defaultNode: {
    size: 16,
    anchorPoints: [[0, 0.5], [1, 0.5]]
    style: {
      fill: '#40a9ff',
      stroke: '#096dd9'
    }
  },
  defaultEdge: {
    shape: 'cubic-horizontal'
    style: {
      stroke: '#A3B1BF'
    }
  },
  nodeStateStyles: {
    hover: {
      opacity: 0.6
    }
  },
  edgeStateStyles: {
    hover: {
      opacity: 0.6
    }
  }
});

示例代码请参考鼠标操作高亮节点。

自定义节点和边

基于内置节点自定义

基于内置节点自定义时，如果只需要修改内置节点的部分参数，G6 3.1.0 版本新增了 getCustomConfig() 方法，方便复用内置的节点，用户可以通过以下方式实现。

G6.registerNode('myCircle', {
    getCustomConfig(cfg) {
      return {
        style: {
        lineWidth: 2
      },
      labelCfg: {
        style: {
          fill: '#595959'
        },
        offset: 10
      },
      stateStyles: {
        // 鼠标hover状态下的配置
        hover: {
          fillOpacity: 0.6
        },
        // 选中节点状态下的配置
        selected: {
          lineWidth: 1
        }
      }
    }
  }
}, 'circle')

更多关于基于内置节点的自定义的内容及使用方法，请参考内置元素文档。

完全自定义

自定义节点和边时，建议将所有默认配置存储到 options 对象中，不要使用硬编码。

G6.registerNode('myCircle', {
  // 自定义节点时的配置
  options: {
    size: 60,
    style: {
      stroke: Global.defaultShapeStrokeColor,
      fill: Global.defaultShapeFillColor,
      lineWidth: 1
    },
    labelCfg: {
      style: {
        fill: '#595959'
      },
      offset: 0
    },
    stateStyles: {
      // 鼠标hover状态下的配置
      hover: {
        fillOpacity: 0.8
      },
      // 选中节点状态下的配置
      selected: {
        lineWidth: 3
      }
    }
  },
  shapeType: 'circle',
  // 文本位置
  labelPosition: 'center',
  drawShape(cfg, group) {}
}

更多关于完全自定义节点的内容及使用方法，请参考自定义节点文档、自定义边文档。

使用布局

G6 3.1.0 版本新增了 random, radial, mds, circular, fruchterman, force, dagre 共 7 种内置布局，开发者可以直接使用内置的布局。另外，还支持布局方法的动态切换、布局参数的动态切换、数据动态切换时布局的更新等。

const graph = new G6.Graph({
  ...                      // 其他配置项
  // Object，布局方法及其配置项，若不配置 layout 则默认为使用数据中的位置信息布局或使用 random 布局。
  layout: {
    type: 'force',         // 指定使用力导向布局
    preventOverlap: true,  // 力导向布局的配置项
    nodeSize: 30,          // 力导向布局的配置项
    ...                    // 其他配置
  }
});
// 动态切换布局或切换布局参数
graph.updateLayout({
// ... 
});
// 动态图数据时自动更新布局
graph.changeData(newData);

更多关于布局的内容及使用方法，请参考Layout文档；API请参考Layout API；示例代码请参考力导向图布局、环形布局参数切换。

自定义布局

G6 3.1.0 不仅支持使用上述内置布局，还支持用户自定义布局。用户可以通过 G6.registerLayout() 复写获取默认配置项方法 getDefaultCfg() 和布局执行方法 execute() 进行布局的自定义。

  G6.registerLayout('myLayout', {
    getDefaultCfg: function getDefaultCfg() {
      return {
        // TODO 默认配置项
      };
    },
    execute: function execute() {
      // TODO 布局方法
    }
  });

更多关于自定义布局的内容及使用方法，请参考自定义布局教程，API请参考Layout API，示例代码请参考自定义布局-Bigraph。