Loading Multiple Disconnected Networks in One Graph

What This Example Builds

This example renders a single RelationGraph canvas that contains several disconnected clusters and two nodes with no edges at all. The result is a full-height viewer with thin black node borders, black line labels drawn directly on the edge paths, and the built-in toolbar parked in the bottom-right corner.

The graph initializes itself as soon as the component mounts. Instead of asking the user to trigger layout or fit actions manually, the code loads the static dataset, moves the viewport to the center, and scales the scene to fit. That makes the example most useful as a baseline for showing fragmented graph data in one canvas with very little runtime logic.

How the Data Is Organized

The data is defined as one module-level RGJsonData literal with rootId, nodes, and lines. The payload mixes several independent relationship groups: one group starts around node 2, another around node 6, another around node 10, and single-1 plus single-2 stay completely isolated.

There is no preprocessing step before setJsonData(). The example does not derive helper edges, transform nested structures, or compute positions in user code. In a real application, the same shape could represent multiple product families, several independent system maps, partially linked knowledge graph imports, or a review screen for records that have not yet been connected.

How relation-graph Is Used

index.tsx wraps the demo in RGProvider, which allows MyGraph.tsx to retrieve the active graph instance through RGHooks.useGraphInstance(). The graph instance API is the center of the runtime flow: setJsonData() injects the prepared payload, moveToCenter() recenters it, and zoomToFit() makes all components visible on first render.

The RelationGraph component receives a compact graphOptions object. The example uses the built-in center layout, enables on-path line labels, keeps the default line color black, applies a 1-pixel black node border, and repositions the built-in toolbar horizontally at the bottom-right. There are no custom slots, no custom node renderers, no editing tools, and no follow-up relayout step.

Styling stays intentionally light. The stylesheet mostly leaves the default structure untouched and only overrides the checked line-label color to white. That restraint keeps the example focused on disconnected-data loading rather than theme customization.

Key Interactions

• The main interaction is automatic initialization: the graph loads, recenters, and fits itself during the mount effect.
• Users can inspect the disconnected groups through the standard relation-graph viewport controls, with the built-in toolbar exposed in the lower-right corner.
• If a line enters the built-in checked state, the stylesheet changes its label text to white, adding a small visual feedback cue without custom event logic.

Key Code Fragments

This fragment shows that the dataset is declared inline and already includes isolated nodes alongside the main connected groups.

const myJsonData: RGJsonData = {
  rootId: '2',
  nodes: [
    { id: '2', text: 'ALTXX' },
    { id: '3', text: 'CH2 TTN' },
    { id: 'single-1', text: 'Single 1' },
    { id: 'single-2', text: 'Single 2' },
    // ...other connected nodes...
  ],

This fragment shows that the graph configuration is intentionally narrow: one center layout, monochrome defaults, and a repositioned built-in toolbar.

const graphOptions: RGOptions = {
  defaultNodeBorderWidth: 1,
  defaultNodeBorderColor: '#000000',
  toolBarDirection: 'h',
  toolBarPositionH: 'right',
  toolBarPositionV: 'bottom',
  defaultLineTextOnPath: true,
  defaultLineColor: '#000000',
  layout: { layoutName: 'center' }
};

This fragment proves that the runtime behavior is just one mount-time bootstrap sequence with no later relayout or editing pass.

const initializeGraph = async () => {
  await graphInstance.setJsonData(myJsonData);
  graphInstance.moveToCenter();
  graphInstance.zoomToFit();
};

useEffect(() => {
  initializeGraph();
}, []);

This stylesheet fragment shows that the example keeps custom theming minimal and only accents checked line labels.

.my-graph {
  .relation-graph {
    .rg-line-peel.rg-line-checked {
      .rg-line-label {
        color: #fff;
      }
    }
  }
}

What Makes This Example Distinct

Compared with nearby examples such as multi-group-2 and multi-group-3, this version is the simpler disconnected-data baseline. It keeps the initial center layout and stops after the first setJsonData() plus center-and-fit cycle, so the article can focus on the input shape rather than on tree routing, force relayout, or delayed option changes.

The comparison data also makes a more specific distinction: this example keeps single-1 and single-2 truly edge-free inside the source payload. That separates it from examples like show-single-nodes, where helper edges are introduced to keep orphaned nodes visible during layout. Here, the teaching point is native presentation of disconnected components and isolated records in one graph, not a workaround for layout constraints.

Its overall combination is relatively uncommon in the example set: one inline payload, several disconnected groups, two isolated nodes, on-path labels, a full-height canvas, and almost no custom UI or styling. That makes it a useful starting point when the goal is to prove that one relation-graph instance can display fragmented topology without extra orchestration.

Where Else This Pattern Applies

This pattern transfers well to review screens that need to show several unrelated subgraphs at once, such as multiple equipment assemblies, separate product modules, or partially merged master-data networks. It is also a practical fit for import validation tools, where some records already form clusters while others are still isolated.

The same structure can be extended into moderation or analysis workflows that compare disconnected communities in one viewport before deciding whether to link them. If a later requirement adds interaction, this example is a stable baseline because the data-loading path is already isolated from editing, slot rendering, and relayout logic.