How to use the vis-network.DataSet 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.
fenglex / janusgraph-visualization / vue / src / components / gremlin.vue View on Github 
}).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'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: {for (const item of this._items) {
nodes.push(...item.getNodes());
edges.push(...item.getEdges());
}
if (!document.body) {
document.body = document.createElement('body');
document.body.style.width = '100vw';
document.body.style.height = '100vh';
}
this._network = new vis.Network(
container || document.body,
{
nodes: new vis.DataSet(nodes),
edges: new vis.DataSet(edges),
},
{
layout: {
hierarchical: {
direction: leftToRight || false ? 'LR' : 'RL',
edgeMinimization: true,
enabled: true,
levelSeparation: 200,
nodeSpacing: 200,
sortMethod: 'directed',
},
},
physics: {
enabled: false,
},for (const item of this._items) {
nodes.push(...item.getNodes());
edges.push(...item.getEdges());
}
if (!document.body) {
document.body = document.createElement('body');
document.body.style.width = '100vw';
document.body.style.height = '100vh';
}
this._network = new vis.Network(
container || document.body,
{
nodes: new vis.DataSet(nodes),
edges: new vis.DataSet(edges),
},
{
layout: {
hierarchical: {
direction: leftToRight || false ? 'LR' : 'RL',
edgeMinimization: true,
enabled: true,
levelSeparation: 200,
nodeSpacing: 200,
sortMethod: 'directed',
},
},
physics: {
enabled: false,
},
...this._options,componentDidMount() {
this.edges = new vis.DataSet();
this.edges.add(this.props.graph.edges);
this.nodes = new vis.DataSet();
this.nodes.add(this.props.graph.nodes);
this.updateGraph();
}import vis from 'vis-network';
import _ from 'lodash';
import { ACTIONS } from '../constants';
import { getDiffNodes, getDiffEdges, findNodeById } from '../logics/utils';
const initialState = {
network: null,
nodeHolder: new vis.DataSet([]),
edgeHolder: new vis.DataSet([]),
nodes: [],
edges: [],
selectedNode: {},
selectedEdge: {},
};
export const reducer = (state=initialState, action)=>{
switch (action.type){
case ACTIONS.CLEAR_GRAPH: {
state.nodeHolder.clear();
state.edgeHolder.clear();
return { ...state, nodes: [], edges: [], selectedNode:{}, selectedEdge: {} };
}
case ACTIONS.SET_NETWORK: {vis-network
A dynamic, browser-based visualization library.
