How to use vis-network - 10 common examples

}).then(res => {
						var result = res.data;
						this.$data.gremlinResult = result.result.replace(/\n/g, "<br>");
						console.info(result);
						// create a network
						var container = document.getElementById('graph');
						var nodes = new vis.DataSet(result.vertices);
						var edges = new vis.DataSet(result.edges);
						// provide the data in the vis format
						var data = {
							nodes: nodes,
							edges: edges
						};
						var options = {
							edges: {
								arrows: {
									to: {
										type: "arrow",
										enabled: true
									}
								}
							},
							nodes: {

}).then(res => {
						var result = res.data;
						this.$data.gremlinResult = result.result.replace(/\n/g, "<br>");
						console.info(result);
						// create a network
						var container = document.getElementById('graph');
						var nodes = new vis.DataSet(result.vertices);
						var edges = new vis.DataSet(result.edges);
						// provide the data in the vis format
						var data = {
							nodes: nodes,
							edges: edges
						};
						var options = {
							edges: {
								arrows: {
									to: {
										type: "arrow",
										enabled: true
									}
								}
							},
							nodes: {
								shape: 'circle'

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)
      })

shape: 'image',
          color: this.buildGroupColor(theme.switch),
          size: 25,
          image: switchImg
        }
      }
    }

    // Create and fill datasets
    const nodes = this.nodes = new DataSet()
    const edges = this.edges = new DataSet()
    // It's necessary to load the items now, otherwise the network would be labeld as ready before the items are visible.
    this.replaceItems()

    // Create the network
    const net = new Network(this.$refs.vis, { nodes, edges }, options)
    this.net = net

    // Some labels contain placeholders for info from connected nodes.
    // Therefore this can't be done before the topology is built.
    this.updateLabels()

    this.cleanUpCallbacks.push(this.$store.subscribe(({ type, payload }, { data }) => {
      ;(this.storeActions[type] || (() => {}))(payload, data)
    }))

    this.$emit('ready', { container, net, nodes, edges })
  },
  beforeDestroy () {

nodes.push({
              id: item.parent.id,
              label: item.parent.alias
            })
          }

          nodeMap[item.child.id] = 1
          nodeMap[item.parent.id] = 1

          edges.push({
            from: item.parent.id,
            to: item.child.id,
            label: item.relation_type.name
          })
        })
        const _nodes = new DataSet(nodes)

        const _edges = new DataSet(edges)
        this.nodes = _nodes
        this.edges = _edges
        // create a network
        this.container = document.querySelector('#visualization')

        // provide the data in the vis format
        var data = {
          nodes: _nodes,
          edges: _edges
        }
        var options = {
          layout: { randomSeed: 2 },
          autoResize: true,
          nodes: {

label: item.parent.alias
            })
          }

          nodeMap[item.child.id] = 1
          nodeMap[item.parent.id] = 1

          edges.push({
            from: item.parent.id,
            to: item.child.id,
            label: item.relation_type.name
          })
        })
        const _nodes = new DataSet(nodes)

        const _edges = new DataSet(edges)
        this.nodes = _nodes
        this.edges = _edges
        // create a network
        this.container = document.querySelector('#visualization')

        // provide the data in the vis format
        var data = {
          nodes: _nodes,
          edges: _edges
        }
        var options = {
          layout: { randomSeed: 2 },
          autoResize: true,
          nodes: {
            size: 30,
            font: {

githubUsersChanged() {
    if (this.githubUsers.length === 0) {
      return;
    }

    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: {

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')
      })
    },

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);
    }

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 });
    }
  }