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

Data Flow & CRUD

This page summarizes how graph data is loaded, queried, and updated in relation-graph.

1. Three Main Data Input Patterns

Pattern A: Incremental APIs (recommended for editors)

  • addNodes, addLines, addFakeLines
  • update and remove APIs
  • explicit layout/viewport control

Best for dynamic, frequent changes.

Pattern B: setJsonData (one-shot initialization)

  • sets full graph data once
  • includes clear/add/layout/center/zoom flow
  • convenient for full-screen initial load

Best for initial whole-graph rendering.

Pattern C: initialData prop

  • set graph data in component initialization
  • commonly used in initial render/SSR-oriented flows
  • not meant as a reactive update channel

2. Read APIs

// Graph collections
graphInstance.getNodes();
graphInstance.getLines();
graphInstance.getFakeLines();
graphInstance.getLinks();

// By id
graphInstance.getNodeById('n1');
graphInstance.getLineById('l1');
graphInstance.getFakeLineById('f1');
graphInstance.getLinkByLineId('l1');

// Graph relationship queries
graphInstance.getRelatedLinesByNode(node);
graphInstance.getLinesBetweenNodes(node);
graphInstance.getNodeRelatedNodes(node);
graphInstance.getNetworkNodesByNode(node);
graphInstance.getDescendantNodes(node);

3. Write APIs

// Add
graphInstance.addNode(node);
graphInstance.addNodes(nodes);
graphInstance.addLine(line);
graphInstance.addLines(lines);
graphInstance.addFakeLines(fakeLines);

// Update
graphInstance.updateNode('n1', { text: 'Updated' });
graphInstance.updateLine('l1', { color: '#60a5fa' });

// Remove
graphInstance.removeNodeById('n2');
graphInstance.removeLineById('l2');
graphInstance.removeFakeLineById('f1');

// Reset
graphInstance.clearGraph();

4. Recommended Runtime Flow for Dynamic Apps

  1. Load/merge incremental data via add APIs.
  2. Apply targeted updates using updateNode / updateLine.
  3. Re-run layout only when needed.
  4. Adjust viewport with moveToCenter / zoomToFit when user expects recentering.

5. When to Use setJsonData

Use setJsonData when:

  • first render of complete data set
  • you want automatic full relayout and auto-fit

Avoid frequent setJsonData in interactive editors because repeated auto center/zoom can cause visible jitter.

6. Common Pitfalls

  • Updating options object reactively does not automatically apply runtime changes; use instance option update APIs.
  • If graph view remounts while provider persists, stale data can remain; call clearGraph() before loading new dataset.
  • Manual coordinate mode and auto layout mode should not conflict in the same update phase.

7. Next Reading