This repository has been archived by the owner on Jul 29, 2019. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added getBaseEdge, getClusteredEdges updateEdge and updateClusteredNo… (
#2055) * Added getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode to allow option changes of the clustered edges as they are no longer the original base Edge changing edge color is a good example. i.e network.clustering.updateEdge(originalEdge.id, {color : '#aa0000'}); will now update all edges including the ones that were created when clustering. Also when clicking on a clustered edge the event returns the clustered Edge id, which doesn't mean a lot. This can be now converted back into the original edge with network.clustering.getBaseEdge(clusteredEdge.id) Similar with updateClusteredNode This new method allows the options to be changed on a clustered Node. i.e clicking on a clustered node gives its clustered node id. Want to change the clustered image to a star then do this network.clustering.updateClusteredNode(clusteredNodeId, {shape : 'star'}); * Updated docs with getClusteredEdge, getBaseEdge, updateEdge and updateClusteredNode Also added method subsections into contents * Added better error handling to updateEdge and updateClusteredNodes corrected errors spotted by @mojoaxel * Added example html demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode
- Loading branch information
Showing
3 changed files
with
247 additions
and
17 deletions.
There are no files selected for viewing
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
107 changes: 107 additions & 0 deletions
107
examples/network/other/changingClusteredEdgesNodes.html
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 |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>Network | Clustering</title> | ||
|
|
||
| <script type="text/javascript" src="../../../dist/vis.js"></script> | ||
| <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> | ||
|
|
||
| <style type="text/css"> | ||
| #mynetwork { | ||
| width: 600px; | ||
| height: 600px; | ||
| border: 1px solid lightgray; | ||
| } | ||
| p { | ||
| max-width:600px; | ||
| } | ||
|
|
||
| h4 { | ||
| margin-bottom:3px; | ||
| } | ||
| </style> | ||
| <script src="../../googleAnalytics.js"></script> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
|
|
||
| <p> | ||
| Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li> | ||
| <li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li> | ||
| <li>Clicking on an edge will also show the results of getBaseEdge and getClusteredEdge</li> | ||
| </ul> | ||
| </p> | ||
|
|
||
| <div id="mynetwork"></div> | ||
| <pre id="eventSpan"></pre> | ||
|
|
||
| <script type="text/javascript"> | ||
| // create an array with nodes | ||
| var nodes = [ | ||
| {id: 1, label: 'Node 1', color:'orange'}, | ||
| {id: 2, label: 'Node 2', color:'DarkViolet', font:{color:'white'}}, | ||
| {id: 3, label: 'Node 3', color:'orange'}, | ||
| {id: 4, label: 'Node 4', color:'DarkViolet', font:{color:'white'}}, | ||
| {id: 5, label: 'Node 5', color:'orange'}, | ||
| {id: 6, label: 'cid = 1', cid:1, color:'orange'}, | ||
| {id: 7, label: 'cid = 1', cid:1, color:'DarkViolet', font:{color:'white'}}, | ||
| {id: 8, label: 'cid = 1', cid:1, color:'lime'}, | ||
| {id: 9, label: 'cid = 1', cid:1, color:'orange'}, | ||
| {id: 10, label: 'cid = 1', cid:1, color:'lime'} | ||
| ]; | ||
|
|
||
| // create an array with edges | ||
| var edges = [ | ||
| {from: 1, to: 2}, | ||
| {from: 1, to: 3}, | ||
| {from: 10, to: 4}, | ||
| {from: 2, to: 5}, | ||
| {from: 6, to: 2}, | ||
| {from: 7, to: 5}, | ||
| {from: 8, to: 6}, | ||
| {from: 9, to: 7}, | ||
| {from: 10, to: 9} | ||
| ]; | ||
|
|
||
| // create a network | ||
| var container = document.getElementById('mynetwork'); | ||
| var data = { | ||
| nodes: nodes, | ||
| edges: edges | ||
| }; | ||
| var options = {layout:{randomSeed:8}}; | ||
| var network = new vis.Network(container, data, options); | ||
| var clusterOptionsByData = { | ||
| joinCondition:function(childOptions) { | ||
| return childOptions.cid == 1; | ||
| }, | ||
| clusterNodeProperties: {id:'cidCluster', borderWidth:3, shape:'database'} | ||
| }; | ||
| network.cluster(clusterOptionsByData); | ||
|
|
||
| network.on("selectNode", function(params) { | ||
| if (params.nodes.length == 1) { | ||
| if (network.isCluster(params.nodes[0]) == true) { | ||
| network.clustering.updateClusteredNode(params.nodes[0], {shape : 'star'}); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| network.on("selectEdge", function(params) { | ||
| if (params.edges.length == 1) { | ||
| // Single edge selected | ||
| var obj = {}; | ||
| obj.clicked_id = params.edges[0]; | ||
| network.clustering.updateEdge(params.edges[0], {color : '#aa0000'}); | ||
| obj.base_edge = network.clustering.getBaseEdge(params.edges[0]); | ||
| obj.all_clustered_edges = network.clustering.getClusteredEdges(params.edges[0]); | ||
| document.getElementById('eventSpan').innerHTML = '<h2>selectEdge event:</h2>' + JSON.stringify(obj, null, 4); | ||
| } | ||
| }); | ||
|
|
||
|
|
||
| </script> | ||
|
|
||
| </body> | ||
| </html> |
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