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

Core Concepts

Before diving into APIs and advanced features, it is important to understand the core conceptual model of relation-graph.

1. Node (JsonNode / RGNode)

A node represents an entity in your graph.

Common fields include:

  • id: unique identifier (required)
  • text: display label
  • x, y: position (optional, depends on layout)
  • data: your business payload
  • style fields such as className, color, width, height

2. Line (JsonLine / RGLine)

A line represents a directional relation between two nodes.

Common fields include:

  • from: source node id
  • to: target node id
  • text: line label
  • data: your business payload
  • style fields such as color, lineWidth, dashType, className

3. Link (RGLink)

Link is a runtime-derived object based on line data.

It binds:

  • the line itself
  • fromNode and toNode objects
  • extra runtime metadata used for rendering and interaction

Use Link when you need rich relationship context during events and runtime operations.

4. Graph Instance (RelationGraphInstance)

The graph instance is the runtime controller of relation-graph.

You use it to:

  • load and update data
  • trigger layout
  • control viewport behavior (center, zoom, move)
  • query nodes/links and run graph operations

Most advanced behaviors are built around instance APIs.

5. Layout

Layout controls how nodes are arranged on canvas.

Typical options:

  • tree layout
  • center layout
  • force layout
  • third-party integrated layouts (for special scenarios)

Layout determines readability, interaction experience, and performance characteristics.

6. Canvas and Viewport

relation-graph renders graph content inside a canvas container.

Core ideas:

  • panning changes canvas offset
  • zooming changes canvas scale
  • viewport-level content can be rendered independently of canvas scale

Understanding this model helps when building custom background/view layers.

7. Slots, Events, and Hooks

These are the extension mechanisms of relation-graph:

  • Slots: customize node/line/canvas/view rendering.
  • Events: react to user interactions (click, drag, context menu, etc.).
  • Hooks: access graph state and runtime data in framework-friendly ways.

Minimal Data Example

{
  "rootId": "a",
  "nodes": [
    { "id": "a", "text": "A" },
    { "id": "b", "text": "B" }
  ],
  "lines": [
    { "from": "a", "to": "b", "text": "A -> B" }
  ]
}

Next Reading