| /Confluence-Site/master/KnowledgeGraph/data-v2.xlsm.json?v=2')\r\n .then(response => response.json())\r\n .then(function (data) {\r\n\r\n sourceData = data;\r\n\r\n function getEdge(edgeId) {\r\n var result = sourceData.edges.filter(obj => {\r\n return obj.id === nodeId\r\n });\r\n return result[0];\r\n }\r\n\r\n function getMoreInformation(nodeId) {\r\n var targetNode = getNode(nodeId);\r\n window.open(targetNode.url, \"_blank\");\r\n }\r\n\r\n // Prepare SELECT2 options in the desired format\r\n var optionsList = [];\r\n for (i = 0; i < sourceData.nodes.length; i++) {\r\n optionsList.push({ id: sourceData.nodes[i].id, text: sourceData.nodes[i].label });\r\n };\r\n\r\n // Make SELECT2 alive\r\n $('.js-example-basic-multiple').select2({\r\n tags: true,\r\n tokenSeparators: [',', ' '],\r\n data: optionsList,\r\n createTag: function (params) {\r\n // Disable visNodes creation by the user\r\n return undefined;\r\n }\r\n });\r\n\r\n // Attach to the \"When a SELECT2 single item is selected\" event\r\n $('#comboboxNodes').on('select2:select', function (e) {\r\n var nodeId = e.params.data.id;\r\n onNodeSelection(nodeId); /*XXX*/\r\n //loadNode(nodeId);\r\n });\r\n\r\n // Attach to the \"When a SELECT2 item is deselected\" event\r\n $('#comboboxNodes').on('select2:unselect', function (e) {\r\n var nodeId = e.params.data.id;\r\n // Remove the node from the graph.\r\n unloadNode(nodeId);\r\n });\r\n\r\n // Start with a clean SELECT2\r\n noSelection();\r\n\r\n visNodes = new vis.DataSet();\r\n visEdges = new vis.DataSet();\r\n visNetwork = {};\r\n\r\n function startNetwork() {\r\n\r\n var container = document.getElementById(\"divGraph\");\r\n var data = {\r\n nodes: visNodes,\r\n edges: visEdges\r\n };\r\n\r\n /* TODO: It would be better to use HighlightNearest rather\r\n than do all this custom implementation with styles tweaking... */\r\n var options = {\r\n groups:{\r\n useDefaultGroups: true /* We tweak the group use case to populate semantic groups */\r\n },\r\n interaction: {\r\n navigationButtons: true,\r\n keyboard: true,\r\n multiselect: false //,\r\n //hover: true\r\n },\r\n physics: {\r\n enabled: true,\r\n barnesHut: {\r\n //theta: 0.1,\r\n gravitationalConstant: -20000, /*Number. Default to -2000. Gravity attracts. We like repulsion. So the value is negative. If you want the repulsion to be stronger, decrease the value (so -10000, -50000).*/\r\n centralGravity: .3,\r\n springLength: 95, /*Number. Default to 95. The edges are modelled as springs. This springLength here is the the rest length of the spring.*/\r\n springConstant: 0.06, /*Number. Default to 0.04. This is how 'sturdy' the springs are. Higher values mean stronger springs.*/\r\n damping: 0.09, /*Number. Default to 0.09. Accepted range: [0 .. 1]. The damping factor is how much of the velocity from the previous physics simulation iteration carries over to the next iteration.*/\r\n avoidOverlap: 0.0 /*Number. Default to 0. Accepted range: [0 .. 1]. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.*/\r\n },\r\n maxVelocity: 5,\r\n minVelocity: 1,\r\n solver: 'barnesHut',\r\n stabilization: {\r\n enabled: true,\r\n iterations: 500,\r\n updateInterval: 100,\r\n onlyDynamicEdges: false,\r\n fit: true\r\n },\r\n timestep: 0.4 /*Number. Default to 0.5. The physics simulation is discrete. This means we take a step in time, calculate the forces, move the nodes and take another step. If you increase this number the steps will be too large and the network can get unstable. If you see a lot of jittery movement in the network, you may want to reduce this value a little.*/\r\n },\r\n edges: {\r\n color: { color: \"#aaaaaa\" },\r\n arrows: {\r\n //from: { enabled: true, type: \"bar\" },\r\n //middle: { enabled: true, type: \"triangle\" },\r\n to: { enabled: true, type: \"arrow\" }\r\n }\r\n },\r\n nodes: {\r\n //borderWidth: 1,\r\n //borderWidthSelected: 2,\r\n chosen: true,\r\n color: {\r\n //border: '#b3b3b3',\r\n background: '#ffffff',\r\n highlight: {\r\n //border: '#0000ff'\r\n background: '#5599ff'\r\n },\r\n //hover: {\r\n //border: '#CD5C5C'\r\n //},\r\n },\r\n //size: 14,\r\n shape: 'box' //box is a good option as well.\r\n }\r\n };\r\n\r\n visNetwork = new vis.Network(container, data, options);\r\n visNetwork.on(\"selectNode\", function (params) {\r\n var nodeId = params.nodes[0];\r\n if (nodeId) {\r\n onNodeSelection(nodeId);\r\n }\r\n });\r\n /*\r\n visNetwork.on(\"deselectNode\", function (params) {\r\n var nodeId = params.previousSelection.nodes[0].id;\r\n if(nodeId){\r\n onNodeUnselection(nodeId);\r\n }\r\n });\r\n */\r\n }\r\n\r\n startNetwork();\r\n\r\n }); /*End of data fetching*/\r\n\r\n });\r\n </script>\r\n</head>\r\n\r\n<body>\r\n <!--<h1>The Open-Measure Interactive Knowledge Graph | <i>Version Beta 0.1</i></h1>-->\r\n <label for=\"comboboxNodes\">\r\n Search and select items:\r\n <select class=\"js-example-basic-multiple js-states form-control\" id=\"comboboxNodes\" multiple=\"multiple\"\r\n style=\"width: 75%\">\r\n </select>\r\n </label>\r\n <div>\r\n <span id=\"spanFocusedNode\"></span>\r\n <input type=\"button\" onclick=\"resetAll()\" value=\"Clear All\">\r\n </div>\r\n <div id=\"divGraph\"></div>\r\n</body>\r\n\r\n</html>","javascript":"","css":""} |
|