Vis.js network: how to extract customized options of a node (and an edge)?

时光怂恿深爱的人放手 提交于 2019-12-07 12:32:26

问题


I'm developing a simplistic graph editor using vis.js/network. Since an editor has to store the network state, I have a saving helper where I extract data from a network and store it as JSON.

For now, I use seemingly quite an ugly/hacky way to extract data for storage:

// get nodes and edges
var nodes = network.body.data.nodes._data; // brief ones; network.body.nodes contain much more stuff (x,y, default stuff)
//# look for a suitable getter
var edges = network.body.data.edges._data;
// network.body.data.edges._data is a hash of { id: , from: , to: }

// get node positions
var positions = network.getPositions(),
    nodeIds = Object.keys(nodes);

var storedEdges = [], storedNodes = [];
for(var edgeId in edges)
    storedEdges.push({ from: edges[edgeId].from, to: edges[edgeId].to });
for(var nodeId in nodes) {
    storedNodes.push({
        id: nodes[nodeId].id, label: nodes[nodeId].label,
        x: positions[nodeId].x, y: positions[nodeId].y
    })
}

As you can see, I manually extract those properties (id, label, x, y) and set to the storedNodes for each node (or edge). What I need is to save also changed properties – only those non-default (customized) ones. Like if some edge has an arrows set to "to" I'd like to save that (but not arrows:false for each other edge); or if a node has a customized shape or color, I'd like to save that without saving all colors, shapes, font sizes etc etc for each node.

So, my question is: how do I get the customized properties of a node? Is there some helper for that? Or do I have to iterate and compare a couple of trees (default options and actual options)? Any suggestions?

PS ok, looking through the whole list of methods tells me that most probably there's no real helpers for this task (except may be getOptionsFromConfigurator if it works without configurator but it seems that it only tells the global options, not those of nodes or edges). So I'll check getOptionsFromConfigurator and then move to searching which properties to iterate and compare. network.body.nodes[id].nodeOptions and network.body.edges[id].edgeOptions look promising. Another thing to look at is using vis.DataSet (I should try to access nodes created as new vis.DataSet(nodes) and see if they get default options and customized options).

来源:https://stackoverflow.com/questions/47275045/vis-js-network-how-to-extract-customized-options-of-a-node-and-an-edge

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!