Vis.js network: how to get data and options back for saving?

Question

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.

Tchad

Answer 1

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

Adit

Thanks, this is indeed helpful. I'm aware of the second example, but somehow overlooked the first one. The network.getPositions() and network.getConnectedNodes(index) helpers are what I'll note. However, this example doesn't provide any tools to extract the network's options which is the most problematic issue here. – Tchad

Answer 2

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

Arrhenius

sorry, I didn't get you: if you implemented a function to get all options (including for instance physics), why not share your implementation? I know how to extract options of separate nodes and edges, I don't know how to extract these: visjs.org/docs/network/#options – Tchad

sorry I don't have a single function for all options, because I'm getting the single option value from the network object. For ex. if I would get 'locale' and 'clickToUse' option: network.options – Arrhenius

Now that is interesting. I'll test whether network.options is updated after editing and report back – Tchad

Ok, this works for some options: alert(JSON.stringify(network.options.clickToUse)); then network.setOptions( { clickToUse: true } ); then alert again – and difference is shown; however, it didn't work for me in case of physics: alert(JSON.stringify(network.options.physics)); shows undefined, even after I set it directly: network.setOptions( { physics: false } );. The usage and limits of network.options are to be tested further – Tchad

its initial value, like you noticed, contains only locale, locales and clickToUse, but even plain values like autoResize or width are not updated there.. I can see that physics, for instance, can be found at options.physics, but I'm looking for those options which are different from the default ones (which should be saved), so options.physics by itself doesn't help much.. – Tchad

I'll leave here a link to the playground: jsfiddle.net/e7Lg99n9/102 – Tchad

@Tchad Did you ever find a way to easily extract options? I'm trying to extract edge options. Different edges can have solid or dashed connections but the Vis API seems bad for this use case. – Soukup

@cathaldcronin1 on the one hand, the general answer is "no", on the other hand, edge options are stored in the edges array (unless you are talking about global or group options for edges), so there should be no problem with this, is there? – Tchad

Answer 3

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

Astrict