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