javascript - Vis.js network: how to get data and options back for saving? - Stack Overflow

admin管理员组

文章数量:1310392

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

Share Improve this question Follow edited Aug 29, 2018 at 21:54 YakovL asked Jul 20, 2017 at 0:01 YakovLYakovL 8,3651313 gold badges7373 silver badges112112 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

本文标签： javascriptVisjs network how to get data and options back for savingStack Overflow