升级指南 - Graphin

从 V1 到 V2

2.0 相比 1.0 版本，对 G6 的能力进行了全面的支持与升级：注册机制，布局机制，元素样式等和 G6 保持一致，支持树图，以及更好的组件化方案

layout 布局

配置和 G6 的 layout 保持一致，因此你可以使用G6 的 Layout 配置
用法和 G6 的 layout 保持一致 , layout.options 需要解构

//v1
<Graphin data={data} layout={{ name: 'grid', options: options }} />
//v2
<Graphin data={data} layout={{ name: 'grid', ...options }} />

data 数据

网图数据：Graphin2.0 的数据结构不变，但是数据内容发生了一些变化，新增状态字段和样式字段，方便业务处理，具体详见：
树图数据：Graphin2.0 支持树图，如果数据结构为 tree，则在内部渲染 TreeGraph

const data = {
  nodes: [
    {
      id: 'node-1',
      // 样式字段
      style: {
        label: {
          value: 'node-1-label',
        },
      },
      // 状态字段
      status: {
        selected: true,
      },
    },
  ],
};

<Graphin data={data} />;

behavior

交互行为，之前在 G6 中需要通过 modes 引入，在 Graphin 中支持组件化引入，同时支持组件属性配置，从而完成数据驱动。在升级 V2 版本，这块不用感知

extend

Graphin 中全面移除 extend 接口，之前 nodeShape，icon，layout 可以通过注册接口实现。extend.marker 彻底移除

扩展节点

// v1
<Graphin extend={{ nodeShape: renderNodeShape }} />;

// v2
Graphin.registerNode(renderNodeShape);

扩展布局

// layout
<Graphin extend={{ nodeShape: customLayout }} />;

// v2
Graphin.registerLayout(customLayout);

扩展 icon

// layout
<Graphin extend={{ icon: customIconFunction }} />;

// v2
Graphin.registerFontFamily(iconloader); // 详情查看 自定义 icon

扩展 marker （彻底移除）

register

和 G6 的注册机制完全保持一致

// 注册节点，详情参考 https://g6.antv.vision/zh/docs/api/registerItem#g6registernodenodename-options-extendednodename
Graphin.registerNode();

// 注册边，详情参考 https://g6.antv.vision/zh/docs/api/registerItem#g6registeredgeedgename-options-extendededgename
Graphin.registerEdge();

// 注册Combo，详情参考 https://g6.antv.vision/zh/docs/api/registerItem#g6registercombocomboname-options-extendedcomboname
Graphin.registerCombo();

// 注册布局，详情参考 https://g6.antv.vision/zh/docs/api/registerLayout#g6registerlayoutlayoutname-layout
Graphin.registerLayout();

// 注册行为，详情参考 https://g6.antv.vision/zh/docs/api/Behavior
Graphin.registerBehavior();