[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:en:disconnected-multi-group-force-relayout":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# Disconnected Relationship Groups With a Delayed Force Relayout\n\n## What This Example Builds\n\nThis example builds a single full-height graph canvas that displays several disconnected relationship islands and two standalone nodes at the same time. The first frame is presented as a centered overview, then the same loaded graph is handed to a force layout half a second later so the islands spread apart without rebuilding the dataset.\n\nThe visible result stays deliberately plain: black node borders, black lines, path-following link labels, and the built-in toolbar placed at the lower-right corner. There are no custom panels, buttons, or editing tools. The main lesson is how to stage a predictable first view and then relax a fragmented graph into a more separated layout.\n\n## How the Data Is Organized\n\nThe data is a single module-scope `RGJsonData` object with `rootId`, a flat `nodes` array, and a flat `lines` array. That one payload contains multiple disconnected components rather than one continuous tree. It includes a group centered on node `2`, another group around node `6`, another around node `10`, and two isolated nodes named `Single 1` and `Single 2`.\n\nThere is no preprocessing before the graph is loaded. `initializeGraph()` passes `myJsonData` directly to `setJsonData()`, so the example's behavior comes from runtime layout changes instead of data transformation. In real applications, the same structure could represent subsystem catalogs, asset inventories, product-module maps, or any other overview where unrelated clusters still need to share one canvas.\n\n## How relation-graph Is Used\n\nThe entry component wraps the demo in `RGProvider`, and `MyGraph` gets the live instance through `RGHooks.useGraphInstance()`. That hook drives the full lifecycle: loading the dataset, moving the viewport to the center, fitting the current content, updating layout options, and triggering a second layout pass.\n\nThe initial `RelationGraph` options use `layoutName: 'center'` with `distanceCoefficient: 0.5`. The same options object also enables on-path line labels, keeps node borders and lines black, and places the built-in toolbar horizontally at the bottom right. After the initial load, the code calls `updateOptions()` to switch only the layout section to `force`, with explicit repulsion, elasticity, and `maxLayoutTimes: Number.MAX_SAFE_INTEGER`, then calls `doLayout()`.\n\nThe component does not add custom slots, custom node rendering, or event handlers. Styling stays close to the built-in appearance. The only concrete SCSS override changes checked line labels to white, while the rest of the nested selectors are empty placeholders. The graph area itself is just a wrapper div with `height: '100vh'`.\n\n## Key Interactions\n\nThe first interaction is automatic rather than user-driven. When the component mounts, it loads the graph data, recenters the viewport, and zooms to fit the whole scene.\n\nThe second interaction is also automatic. After a `500` millisecond delay, the graph switches from the initial `center` layout to a `force` layout and runs another layout pass on the same instance.\n\nThe only visible manual controls come from relation-graph's built-in toolbar. The example configures where that toolbar appears, but it does not add custom click handlers, editing actions, or a separate control surface.\n\n## Key Code Fragments\n\nThis fragment shows that the dataset is declared inline and already includes isolated nodes inside the same payload.\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        { id: '4', text: 'CH1 AlCu' },\n        { id: '5', text: 'MainFrame' },\n```\n\nThis fragment shows the monochrome defaults, path-following labels, toolbar placement, and the initial centered layout.\n\n```tsx\nconst graphOptions: RGOptions = {\n    defaultNodeBorderColor: '#000000',\n    toolBarDirection: 'h',\n    toolBarPositionH: 'right',\n    toolBarPositionV: 'bottom',\n    defaultLineTextOnPath: true,\n    defaultLineColor: '#000000',\n    layout: {\n        layoutName: 'center',\n        distanceCoefficient: 0.5\n    }\n};\n```\n\nThis fragment shows the mount-time initialization sequence that loads data and fits the first view.\n\n```tsx\nconst initializeGraph = async () => {\n    await graphInstance.setJsonData(myJsonData);\n    graphInstance.moveToCenter();\n    graphInstance.zoomToFit();\n    // ...delayed relayout follows...\n};\n```\n\nThis fragment shows the delayed handoff from `center` to `force` on the already loaded graph instance.\n\n```tsx\nsetTimeout(() => {\n    graphInstance.updateOptions({\n        layout: {\n            layoutName: 'force',\n            force_node_repulsion: 0.3,\n            force_line_elastic: 5,\n            maxLayoutTimes: Number.MAX_SAFE_INTEGER\n        }\n    });\n    graphInstance.doLayout();\n}, 500);\n```\n\nThis fragment shows the only concrete style override in the local stylesheet.\n\n```scss\n.rg-line-peel.rg-line-checked {\n    .rg-line-label {\n        color: #fff;\n    }\n}\n```\n\n## What Makes This Example Distinct\n\nThe comparison data shows that the distinctive part is not disconnected data alone. Compared with [`multi-group`](multi-group.md), this example adds a timed post-load separation step instead of stopping after the initial centered overview. Compared with `multi-group-2`, it emphasizes live layout transition and organic spacing rather than tree readability, curved routing, or junction tuning for the same fragmented dataset family.\n\nIt is also narrower than the other runtime-layout neighbors. Compared with `switch-layout` and `force-sea-anemone`, this example performs one delayed handoff to force layout, not a repeating layout carousel and not an ambient force animation. The rare combination is a multi-island dataset, truly isolated nodes, a monochrome technical style, on-path labels, bottom-right toolbar placement, and a delayed relayout on the same live graph instance. That makes it a strong starting point when the requirement is \"show all disconnected groups first, then let them separate further\" without adding custom controls.\n\n## Where Else This Pattern Applies\n\nThis pattern transfers well to subsystem overviews, mixed asset catalogs, portfolio maps, product-family diagrams, and knowledge-map previews where the data is fragmented but still benefits from one shared canvas. A production version could keep the same initialization sequence while replacing the inline sample with API data, adjusting the force coefficients per dataset size, or turning the delayed relayout into a conditional step after filters or data refreshes.\n\nThe reusable idea is the staging strategy: load one disconnected dataset, frame it predictably for the first view, and then re-spread it with a runtime layout change instead of rebuilding the graph from scratch.\n",false,500,1782615417597]