- Using data and shell model when creating diagrams. The
shell.js
. is standard one, taken from Cisco NeXt UI examples. The data is comming fromtopologyData
dictionary. - How to change the icon of a network device inside shell.js.
- i.e. how to interact with it withing nx.define.
(function (nx) { /** * define application */ var Shell = nx.define(nx.ui.Application, { methods: { start: function () { //your application main entry // initialize a topology var topo = new nx.graphic.Topology({ // set the topology view's with and height width: 1500, height: 850, // node config nodeConfig: { // label display name from of node's model, could change to 'model.id' to show id label: 'model.name' }, // link config linkConfig: { // multiple link type is curve, could change to 'parallel' to use parallel link linkType: 'curve' }, // show node's icon, could change to false to show dot showIcon: true }); //set data to topology topo.data(topologyData); //attach topology to document topo.attach(this); } } }); /** * create application instance */ var shell = new Shell(); /** * invoke start method */ shell.start(); })(nx);
You can add 'iconType' attribute under 'nodeConfig', here is an demo you can reference.
Base - Set node's label and icon
That is different.
`data.js` has:
nodes: [ {"id": 0, "x": -250, "y": 350, "name": "RTR01", "icon": "router"}, {"id": 1, "x": -250, "y": 1100, "name": "RTR02", "icon": "router"}, {"id": 2, "x": -1000, "y": 700, "name": "RTR03", "icon": "router"},
then, in `shell.js`have:
nodeConfig: { // label display name from of node's model, could change to 'model.id' to show id label: 'model.name', iconType: 'model.icon' },
Refer this example for reference. maybe you can see the differences.
Comments
0 comments
Please sign in to leave a comment.