diff --git a/docs-2.0/nebula-explorer/iframe.md b/docs-2.0/nebula-explorer/iframe.md index 72c05866ae9..3cd406637ea 100644 --- a/docs-2.0/nebula-explorer/iframe.md +++ b/docs-2.0/nebula-explorer/iframe.md @@ -45,23 +45,79 @@ The Explorer has been installed. 3. Embed the Explorer page by using iframe on a third-party page. The work needs to be developed by yourself. -4. On the parent page, pass the login message through the postMessage method in the following format: +4. On the parent page, pass the request through the postMessage method as shown in the following example: ```json - { type: 'NebulaGraphExploreLogin', - data: { - authorization: 'WyJyb290IiwibmVidWxhIl0=', - host: '192.168.8.240:9669', - space: 'basketballplayer' - } } + const links = [ + { + source: 'player150', + target: 'player143', + id: 'follow player150->player143 @0', + rank: 0, + edgeType: 'follow', + properties: { + degree: 90, + }, + color: '#d40e0e', + }, + { + source: 'player143', + target: 'player150', + id: 'follow player143->player150 @0', + rank: 0, + edgeType: 'follow', + properties: { + degree: 90, + }, + }, + ]; + + const nodes = [ + { + id: 'player150', + tags: ['player'], + properties: { + player: { + age: 20, + name: 'Luka Doncic', + }, + }, + color: '#20eb14', + }, + { + id: 'player143', + tags: ['player'], + properties: { + player: { + age: 23, + name: 'Kristaps Porzingis', + }, + }, + color: '#3713ed', + }, + ]; + + // login + iframeEle.contentWindow.postMessage( + { + // `NebulaGraphExploreLogin` type has been deprecated + type: 'ExplorerLogin', + data: { + authorization: 'WyJyb290IiwibmVidWxhIl0=', // NebulaGraph accounts and passwords were formed into an array and serialized, then Base64 encoded. The array format is `['account', 'password']`. The example is['root', 'nebula']. The encoded result is `WyJyb290IiwibmVidWxhIl0=`. + host: '192.168.8.240:9669', // The graph service address of NebulaGraph. + space: 'demo_basketball', // The name of the target graph space. + }, + }, + '*' + ); + + // add vertexes or edges + iframeEle.contentWindow.postMessage({ type: 'ExplorerAddCanvasElements', data: { nodes, links } }, '*') + + // Clear canvas + iframeEle.contentWindow.postMessage({ type: 'ExplorerClearCanvas' }, '*') ``` - - type: The method type must be `NebulaGraphExploreLogin`. - - dataļ¼š - - `authorization`: NebulaGraph accounts and passwords were formed into an array and serialized, then Base64 encoded. The array format is `['account', 'password']`. The example is['root', 'nebula']. The encoded result is `WyJyb290IiwibmVidWxhIl0=`. - - `host`: The graph service address of NebulaGraph. - - `space`: The name of the target graph space. - 5. Start the Explorer service. !!! note