JavaScript is required
relation-graph Relational Data Visualization and Editing
Sign in 中文 GitHub

Node Data (JsonNode / RGNode)

Node is the fundamental data unit in relation-graph.

In practice you work with two forms:

  • JsonNode: the input/config object you provide.
  • RGNode: the runtime object generated by graph engine after data is added.

1. JsonNode vs RGNode

  • Use JsonNode to define data.
  • Use RGNode when reading runtime state from instance APIs.
  • RGNode contains extra runtime-calculated fields (visibility/layout/runtime dimensions).

Typical flow:

const nodeA = { id: 'a', text: 'Node A' };
graphInstance.addNodes([nodeA]);
const rgNodeA = graphInstance.getNodeById('a'); // RGNode

2. Core Fields You Should Know

Identity and Label

  • id: string required and unique.
  • text?: string label text.

relation-graph uses text, not label.

Interaction and State

  • expanded?: boolean
  • selected?: boolean
  • disablePointEvent?: boolean
  • disableDrag?: boolean
  • hidden?: boolean

Visual Style

  • className?: string
  • nodeShape?: RGNodeShape
  • color?: string
  • borderColor?: string
  • borderWidth?: number
  • borderRadius?: number
  • fontColor?: string
  • fontSize?: number
  • opacity?: number

Geometry

  • width?: number, height?: number
  • x?: number, y?: number
  • zIndex?: number
  • runtime-only measured size: el_W, el_H

Business and Tree Fields

  • data?: Record<string, any> business payload.
  • children?: JsonNode[] tree shorthand for import.
  • type?: string useful for style grouping (rg-node-type-{type}).

3. CRUD Operations

// Create
graphInstance.addNode({ id: 'n1', text: 'N1' });
graphInstance.addNodes([{ id: 'n2', text: 'N2' }]);

// Read
const node = graphInstance.getNodeById('n1');
const allNodes = graphInstance.getNodes();

// Update
graphInstance.updateNode('n1', {
  text: 'N1 Updated',
  color: '#4ade80'
});

// Delete
graphInstance.removeNodeById('n2');

4. Practical Example

const nodes = [
  {
    id: 'root',
    text: 'Root',
    type: 'service',
    className: 'node-root',
    color: '#dbeafe',
    width: 140,
    height: 48,
    data: { owner: 'team-a' }
  },
  {
    id: 'worker-1',
    text: 'Worker 1',
    type: 'worker',
    x: 420,
    y: 180,
    fixed: true
  }
];

graphInstance.addNodes(nodes);

5. Important Notes

  • Keep id stable and unique across updates.
  • If you manually assign x/y, avoid automatic layout or use fixed/manual layout strategy.
  • children is for import convenience; graph runtime works on flattened node/link structures.
  • If width/height are not specified, layout may need a short delay to wait for measured node size.

6. Next Reading