-
Notifications
You must be signed in to change notification settings - Fork 77
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
42 changed files
with
2,946 additions
and
1,924 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,102 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <head> | ||
| <title>netjsongraph.js: basic example</title> | ||
| <meta charset="utf-8"> | ||
| <meta charset="utf-8" /> | ||
| <!-- theme can be easily customized via css --> | ||
| <link href="../src/css/netjsongraph-theme.css" rel="stylesheet"> | ||
| <link href="../src/css/netjsongraph.css" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <link href="../src/css/netjsongraph-theme.css" rel="stylesheet" /> | ||
| <link href="../src/css/netjsongraph.css" rel="stylesheet" /> | ||
| </head> | ||
| <body> | ||
| <script type="text/javascript" src="../dist/netjsongraph.min.js"></script> | ||
| <script type="text/javascript"> | ||
| /* | ||
| /* | ||
| The demo is used to show the use of the `searchElements` function. | ||
| For test, you can input `test` and click the `search` button. | ||
| See the following comments for details. | ||
| */ | ||
| // `graph` render defaultly. | ||
| const graph = new NetJSONGraph("./data/netjsonmap.json", { | ||
| onLoad: function(){ | ||
| let searchContainer = document.createElement("div"), | ||
| searchInput = document.createElement("input"), | ||
| searchBtn = document.createElement("button"), | ||
| /* | ||
| // `graph` render defaultly. | ||
| let graph = new NetJSONGraph("./data/netjsonmap.json", { | ||
| onLoad: function () { | ||
| const gui = this.utils.getGUI(this); | ||
| gui.init(); | ||
| if (this.config.metadata) { | ||
| gui.createAboutContainer(graph); | ||
| this.utils.updateMetadata.call(this); | ||
| } | ||
| if (this.config.switchMode) { | ||
| gui.renderModeSelector.onclick = () => { | ||
| if (this.config.render === this.utils.mapRender) { | ||
| this.config.render = this.utils.graphRender; | ||
| this.echarts.dispose(); | ||
| graph = new NetJSONGraph(this.data, { | ||
| ...this.config, | ||
| }); | ||
| graph.render(); | ||
| } else { | ||
| this.config.render = this.utils.mapRender; | ||
| this.config.render(this.data, this); | ||
| } | ||
| }; | ||
| } | ||
| this.config.onClickElement = (type, data) => { | ||
| let nodeLinkData; | ||
| if (type === "node") { | ||
| nodeLinkData = this.utils.nodeInfo(data); | ||
| } else { | ||
| nodeLinkData = this.utils.linkInfo(data); | ||
| } | ||
| gui.getNodeLinkInfo(type, nodeLinkData); | ||
| gui.sideBar.classList.remove("hidden"); | ||
| }; | ||
| let searchContainer = document.createElement("div"), | ||
| searchInput = document.createElement("input"), | ||
| searchBtn = document.createElement("button"), | ||
| /* | ||
| Pass in the url to listen to, and save the returned function. | ||
| Please ensure that the return value of the api is the specified json format. | ||
| */ | ||
| searchFunc = this.utils.searchElements.call(this, "https://ee3bdf59-d14c-4280-b514-52bd3dfc2c17.mock.pstmn.io/?search="); | ||
| searchFunc = this.utils.searchElements.call( | ||
| this, | ||
| "https://ee3bdf59-d14c-4280-b514-52bd3dfc2c17.mock.pstmn.io/?search=", | ||
| ); | ||
|
|
||
| searchInput.setAttribute("class", "njg-searchInput"); | ||
| searchInput.placeholder = | ||
| "Input value for searching special elements."; | ||
| searchBtn.setAttribute("class", "njg-searchBtn"); | ||
| searchBtn.innerHTML = "search"; | ||
| searchContainer.setAttribute("class", "njg-searchContainer"); | ||
| searchContainer.appendChild(searchInput); | ||
| searchContainer.appendChild(searchBtn); | ||
| this.el.appendChild(searchContainer); | ||
|
|
||
| searchInput.setAttribute("class", "njg-searchInput"); | ||
| searchInput.placeholder = "Input value for searching special elements."; | ||
| searchBtn.setAttribute("class", "njg-searchBtn"); | ||
| searchBtn.innerHTML = "search"; | ||
| searchContainer.setAttribute("class", "njg-searchContainer"); | ||
| searchContainer.appendChild(searchInput); | ||
| searchContainer.appendChild(searchBtn); | ||
| this.el.appendChild(searchContainer); | ||
| searchInput.onchange = () => { | ||
| // do something to deal user input value. | ||
| }; | ||
|
|
||
| searchInput.onchange = () => { | ||
| // do something to deal user input value. | ||
| }; | ||
| searchBtn.onclick = () => { | ||
| let inputValue = searchInput.value.trim(); | ||
|
|
||
| searchBtn.onclick = () => { | ||
| let inputValue = searchInput.value.trim(); | ||
|
|
||
| /* | ||
| Pass in the relevant search value, | ||
| /* | ||
| Pass in the relevant search value, | ||
| which will re-render automatically according to the request result within the function. | ||
| */ | ||
| if(inputValue === "appendData"){ | ||
| // appendData | ||
| searchFunc(inputValue, false); | ||
| } | ||
| else{ | ||
| searchFunc(inputValue); | ||
| } | ||
| if (inputValue === "appendData") { | ||
| // appendData | ||
| searchFunc(inputValue, false); | ||
| } else { | ||
| searchFunc(inputValue); | ||
| } | ||
|
|
||
| searchInput.value = ""; | ||
| } | ||
| searchInput.value = ""; | ||
| }; | ||
|
|
||
| this.utils.hideLoading(); | ||
| } | ||
| }); | ||
| graph.render(); | ||
| this.utils.hideLoading(); | ||
| }, | ||
| }); | ||
|
|
||
| graph.render(); | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.