01. Definition of Data

In graphin, nodes represents the collection of nodes, and edges represents the collection of edges.

• 1. Use TypeScript to define data:

export interface Data {
  /** node */
  nodes: Node[];
  /** edge */
  edges: Edge[];
}

• 2. important concepts of Node

• 3. important concepts of Edge

For a complete API, please see [API Manual] (../apis/#data)

02. From data to view

Graphin Full data rendering and incremental addition:

• Incremental data addition: Graphin adds data dynamically according to the pre-layout to achieve node diffusion, relationship discovery and other effects.
• Full data rendering: Graphin supports full data rendering to Meet the requirements of saving, importing, exporting, etc.

when we use Graphin, we need to pass in the data to be rendered.

Sometimes we need to adjust the color, size, etc. of the nodes dynamically according to some business scenes. In Graphin, it is simple to complete, because we just need to customize a transform function. Graphin is design as a data-driven component so data changing can change the view.

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

As for the default CircleNode node, we only need to change the style of each node.

• Custom transform function

cconst transNodes = (nodes: NodeData[]) => {
        return nodes.map(node => {
            return {
                id: node.id,
                data: node,
                shape: node.type === 'phone' ? 'MyCustomNode' : 'CircleNode',
                style: {
                    nodeSize: node.weight > 20 ? 50 : 20,
                },
            };
        });
    };
const transEdges = (edges: EdgeData[]) => {
    return edges;
};

const transform = (data: { nodes: NodeData[]; edges: EdgeData[] }) => {

    return {
        nodes: transNodes(data.nodes),
        edges: transEdges(data.edges),
    };
};

03. Special cases

Through the definition of the data, we know that the data of Graphin is a mandatory option. We have listed several special cases below.

• How to render an empty canvas

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

• How is the data and layout combined?

There are two key points about rendering

• 1. The shape of the node: it is determined by the shape and id
• 2. The position of the node: it is determined by the x and y of the Node