How to use the vis-network.Network function in vis-network

To help you get started, we’ve selected a few vis-network examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pycook / cmdb / ui / src / views / cmdb / modeling / preference_relation / index.vue View on Github external
setTimeout(() => {
          const container = document.querySelector('#view-' + this.relationViews.views[viewName].topo_flatten.join(''))
          const n = new Network(container, data, options)
          console.log(n) // TODO
        }, 100)
      })
github pycook / cmdb / ui / src / views / cmdb / modeling / preference_relation / index.vue View on Github external
physics: {
            enabled: false
          },
          interaction: {
            hover: true,
            dragView: true,
            dragNodes: true,
            multiselect: true
          }
        }

        // initialize your network!
        this.container.oncontextmenu = () => { return false }
        this.options = options
        this.viewData = data
        this.network = new Network(this.container, data, options)
        this.canvas = this.network.canvas.frame.canvas
        this.ctx = this.canvas.getContext('2d')
      })
    },
github crubier / react-graph-vis / src / index.js View on Github external
smooth: false,
        color: "#000000",
        width: 0.5,
        arrows: {
          to: {
            enabled: true,
            scaleFactor: 0.5
          }
        }
      }
    };

    // merge user provied options with our default ones
    let options = defaultsDeep(defaultOptions, this.props.options);

    this.Network = new vis.Network(
      container,
      Object.assign({}, this.props.graph, {
        edges: this.edges,
        nodes: this.nodes
      }),
      options
    );

    if (this.props.getNetwork) {
      this.props.getNetwork(this.Network);
    }

    if (this.props.getNodes) {
      this.props.getNodes(this.nodes);
    }
github zewa666 / aurelia-store-examples / vis / src / state-visualization.js View on Github external
const nodes = new vis.DataSet(this.githubUsers.map((user) => ({
      id: user.id,
      label: user.login,
      title: user.login
    })));

    // create an array with edges
    const edges = new vis.DataSet(this.githubUsers.slice(1).map((user, idx) => {
      return {
        from: this.githubUsers[idx].id,
        to: user.id
      };
    }));

    if (!this.network) {
      this.network = new vis.Network(this.host, { nodes, edges }, {
        interaction: {
          hover: true
        },
        nodes: {
          color: {
            hover: {
              border: '#2B7CE9',
              background: '#D2E5FF'
            }
          }
        }
      });
    } else {
      this.network.setData({ edges, nodes });
    }
  }
github pycook / cmdb / cmdb-ui / src / views / cmdb / modeling / preference_relation / index.vue View on Github external
physics: {
            enabled: false
          },
          interaction: {
            hover: true,
            dragView: true,
            dragNodes: true,
            multiselect: true
          }
        }

        // initialize your network!
        this.container.oncontextmenu = () => { return false }
        this.options = options
        this.viewData = data
        this.network = new Network(this.container, data, options)
        this.canvas = this.network.canvas.frame.canvas
        this.ctx = this.canvas.getContext('2d')
      })
    },
github fenglex / janusgraph-visualization / vue / src / components / gremlin.vue View on Github external
edges: {
								arrows: {
									to: {
										type: "arrow",
										enabled: true
									}
								}
							},
							nodes: {
								shape: 'circle'
							},
							interaction: {
								selectConnectedEdges: false
							}
						};
						var network = new vis.Network(container, data, options);
						network.on("selectNode", function(params) {
							var nid = params.nodes[0];
							Notification.closeAll();
							var node = nodes._data.get(nid);
							console.info(node)
							var title = "id:" + node.id + ",\nlabel:" + node.label;
							var c = "";
							var props = node.properties;
							for (var i = 0; i < props.length; i++) {
								c += props[i].key + ":" + props[i].value + "<br>";
							}
							Notification({
								title: title,
								message: c,
								dangerouslyUseHTMLString: true,
								duration: 500000,
github pycook / cmdb / cmdb-ui / src / views / cmdb / modeling / preference_relation / index.vue View on Github external
toggleSelect (checked) {
      if (checked) {
        this.canSelect = true
        this.options.autoResize = false
        this.options.interaction.hover = false
        this.options.interaction.dragView = false
        this.options.interaction.dragNodes = false
        this.network = new Network(this.container, this.viewData, this.options)
        this.canvas = this.network.canvas.frame.canvas
        this.ctx = this.canvas.getContext('2d')
      } else {
        this.canSelect = false
        this.options.autoResize = true
        this.options.interaction.hover = true
        this.options.interaction.dragView = true
        this.options.interaction.dragNodes = true
        this.network = new Network(this.container, this.viewData, this.options)
        this.canvas = this.network.canvas.frame.canvas
        this.ctx = this.canvas.getContext('2d')
      }
    },
github prabushitha / gremlin-visualizer / src / components / NetworkGraph / NetworkGraphComponent.js View on Github external
componentDidMount() {
    const data = {
      nodes: this.props.nodeHolder,
      edges: this.props.edgeHolder
    };
    const network = new vis.Network(this.refs.myRef, data, this.props.networkOptions);

    network.on('selectNode', (params) => {
      const nodeId = params.nodes && params.nodes.length > 0 ? params.nodes[0] : null;
      this.props.dispatch({ type: ACTIONS.SET_SELECTED_NODE, payload: nodeId });
    });

    network.on("selectEdge", (params) => {
      const edgeId = params.edges && params.edges.length === 1 ? params.edges[0] : null;
      const isNodeSelected = params.nodes && params.nodes.length > 0;
      if (!isNodeSelected && edgeId !== null) {
        this.props.dispatch({ type: ACTIONS.SET_SELECTED_EDGE, payload: edgeId });
      }
    });

    this.props.dispatch({ type: ACTIONS.SET_NETWORK, payload: network });
  }
github pycook / cmdb / ui / src / views / cmdb / modeling / preference_relation / index.vue View on Github external
if (checked) {
        this.canSelect = true
        this.options.autoResize = false
        this.options.interaction.hover = false
        this.options.interaction.dragView = false
        this.options.interaction.dragNodes = false
        this.network = new Network(this.container, this.viewData, this.options)
        this.canvas = this.network.canvas.frame.canvas
        this.ctx = this.canvas.getContext('2d')
      } else {
        this.canSelect = false
        this.options.autoResize = true
        this.options.interaction.hover = true
        this.options.interaction.dragView = true
        this.options.interaction.dragNodes = true
        this.network = new Network(this.container, this.viewData, this.options)
        this.canvas = this.network.canvas.frame.canvas
        this.ctx = this.canvas.getContext('2d')
      }
    },

vis-network

A dynamic, browser-based visualization library.

Apache-2.0
Latest version published 6 months ago

Package Health Score

88 / 100
Full package analysis