My intention is to create simple graph editor using vis.js and the first feature I'm thinking about is to position nodes manually and save that. However, unlike setting options a straight-forward method to get all the options doesn't seem to exist. Is there any reasonable approach to get them (aside trying to track all the changes using events like dragEnd which sounds way too fragile)?

In fact, I'm looking for a way to extract both data (nodes/edges and their settings) and options so that once the network is rendered using those options, it looks the same (or at least similar) to what was saved.

My intention is to create simple graph editor using vis.js and the first feature I'm thinking about is to position nodes manually and save that. However, unlike setting options a straight-forward method to get all the options doesn't seem to exist. Is there any reasonable approach to get them (aside trying to track all the changes using events like dragEnd which sounds way too fragile)?

In fact, I'm looking for a way to extract both data (nodes/edges and their settings) and options so that once the network is rendered using those options, it looks the same (or at least similar) to what was saved.

• javascript
• vis.js
• vis.js-network

3 Answers 3

Vis.js provides a simple example to export and import networks as JSON.

There is also an example with basic Editor-functionality like adding/removing nodes and edges

I've created my js functions to get all options.

For example if I would get the group of each node id:

function getGroup(network, id){
     var group = network.body.data.nodes._data[id].group;
     return group;
} 

UPDATE: I don't have a single function to get all options, but for ex. you can get few options value with this function:

function getOptions(network){
     var opt = network.options;
     return opt;
} 
function getLocale(network){
     var locale = getOptions(network).locale;
}
function getClickToUse(network){
     var clickToUse = getOptions(network).clickToUse;
}

In my case I don't need the global options, as for saving the data here is what I did:

async function saveJSON() {

    // For all nodes:
    var str = "{\"nodes\":[";
    var ns = nodes._data;
    ns.forEach(function(n) {
        str += JSON.stringify(n);
        str += ",";
        });
    str = str.slice(0,-1) + "],";

    // For all edges:
    str += "\"edges\":[";
    var es = edges._data;
    es.forEach(function(e) {
        delete e['id'];
        str += JSON.stringify(e);
        str += ",";
        });
    str = str.slice(0,-1) + "]}";

    console.log($.ajax({
        method: "POST",
        url: "network.json",
        data: str,
        success: function(resp) {}
        }));
    }

As for loading it's like this:

async function loadJSON() {
    $.ajax({
            method: "GET",
            url: "network.json",
            cache: false,
            success: function(data0) {

        network.destroy();
        // data0 seems already parsed as JSON by the server
        // No need to do:  var data1 = JSON.parse(data0);
        // console.log(data0);
        nodes = new vis.DataSet(data0.nodes);
        edges = new vis.DataSet(data0.edges);
        data.nodes = nodes;
        data.edges = edges;
        network = new vis.Network(container, data, options);
    } });
}