[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:en:multi-group":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# Loading Multiple Disconnected Networks in One Graph\n\n## What This Example Builds\n\nThis 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.\n\nThe 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.\n\n## How the Data Is Organized\n\nThe 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.\n\nThere 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.\n\n## How relation-graph Is Used\n\n`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.\n\nThe `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.\n\nStyling 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.\n\n## Key Interactions\n\n- The main interaction is automatic initialization: the graph loads, recenters, and fits itself during the mount effect.\n- Users can inspect the disconnected groups through the standard relation-graph viewport controls, with the built-in toolbar exposed in the lower-right corner.\n- 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.\n\n## Key Code Fragments\n\nThis fragment shows that the dataset is declared inline and already includes isolated nodes alongside the main connected groups.\n\n```tsx\nconst myJsonData: RGJsonData = {\n  rootId: '2',\n  nodes: [\n    { id: '2', text: 'ALTXX' },\n    { id: '3', text: 'CH2 TTN' },\n    { id: 'single-1', text: 'Single 1' },\n    { id: 'single-2', text: 'Single 2' },\n    // ...other connected nodes...\n  ],\n```\n\nThis fragment shows that the graph configuration is intentionally narrow: one center layout, monochrome defaults, and a repositioned built-in toolbar.\n\n```tsx\nconst graphOptions: RGOptions = {\n  defaultNodeBorderWidth: 1,\n  defaultNodeBorderColor: '#000000',\n  toolBarDirection: 'h',\n  toolBarPositionH: 'right',\n  toolBarPositionV: 'bottom',\n  defaultLineTextOnPath: true,\n  defaultLineColor: '#000000',\n  layout: { layoutName: 'center' }\n};\n```\n\nThis fragment proves that the runtime behavior is just one mount-time bootstrap sequence with no later relayout or editing pass.\n\n```tsx\nconst initializeGraph = async () => {\n  await graphInstance.setJsonData(myJsonData);\n  graphInstance.moveToCenter();\n  graphInstance.zoomToFit();\n};\n\nuseEffect(() => {\n  initializeGraph();\n}, []);\n```\n\nThis stylesheet fragment shows that the example keeps custom theming minimal and only accents checked line labels.\n\n```scss\n.my-graph {\n  .relation-graph {\n    .rg-line-peel.rg-line-checked {\n      .rg-line-label {\n        color: #fff;\n      }\n    }\n  }\n}\n```\n\n## What Makes This Example Distinct\n\nCompared 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.\n\nThe 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.\n\nIts 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.\n\n## Where Else This Pattern Applies\n\nThis 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.\n\nThe 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.\n",false,500,1782615416794]