Data 数据驱动

01. 数据的定义

图的数据结构比较固定。一般用 nodes 表示节点的集合，用 edges 表示边的集合。

• • 用 TypeScript 的类型来定义数据 data 如下：

export interface Data {
    /** 节点 */
    nodes: Node[];
    /** 边 */
    edges: Edge[];
}

• • Node 最重要的三个概念

• • Edge 最重要的三个概念

完整的 API，请查看API 手册

02. 从数据到视图

Graphin 数据全量渲染和增量添加：

• 增量数据添加：Graphin 会根据前置布局，动态完成增量数据添加，达到节点扩散，关系发现等效果。
• 全量数据渲染：Graphin 支持全量数据渲染，满足保存，导入，导出等需求。

不管是何种方式，我们在使用 Graphin 的时候，只需要传入要渲染的 data 就可以。

有时候我们需要根据业务场景，动态调整节点的颜色，大小等。在 Graphin 中，完成这个需求也很简单，只需要自定义一个 transform 函数。因为 Graphin 是数据驱动设计，改变数据即可以改变视图。

<Graphin data={transform(data)} />

对于默认的 CircleNode 节点，我们只需要改变每个节点 style 即可：

Graphin 的内置 icon 请查阅内置图标

这里的 style 属性规范只针对 Graphin 的内置 Shape。如果是自定义 Shape，从 style 到 G6 节点 attr 的映射可以在 Shape 定义时自行配置

综上，我们可以编写 transform 函数来对 Data 进行转换：

const trasform = (data: { nodes: NodeData[]; edges: EdgeData[] }) => {
    const nodes = (nodes: NodeData[]) => {
        return nodes.map(node => {
            return {
                id: node.id,
                data: node,
                // 根据type来指定渲染的shape
                shape: node.type === 'phone' ? 'MyCustomNode' : 'CircleNode',
                // 根据数据的渲染样式
                style: {
                    nodeSize: node.weight > 20 ? 50 : 20,
                },
            };
        });
    };
    const edges = (edges: EdgeData[]) => {
        return edges;
    };
    return {
        nodes: transform.nodes(data.nodes),
        edges: transform.edges(data.edges),
    };
};
<Graphin data={transform.(data)} />;

03. 特殊情况

通过数据的定义，我们知道 Graphin 的 data 是必选项，我们把几种特殊的情况列举在下面：

• 如何渲染一个空画布

<Graphin data={{ nodes: [], edges: [] }} />

• 数据 data 和布局 layout 组合起来是如何渲染的？

渲染包含两个关键点

• 节点的形状：它由 shape 和 id 共同决定的
• 节点的位置：它由 Node 的 x 和 y 值决定的