Refresh Graph with new data without changing position or refresh the page or rebuild the entire tree

we are using gojs to build a question-answer tree. question will be the root node and the option will be the child nodes… we have UI to update/add/delete the option. Each option is attached to a new question with a similar data structure ( having an option as a child ) tree can grow to infinite.

Now the issue here is when the user opens UI for updating the question or adding/removing option and come back to the page we need to refresh the page to get newly updated tree. Till now we have been using following code to refresh. ( this.div is the refresh of the div in html & initGoJS method will again reinitialize the GOJS.

this.diagram.div = null;

how we can do that with out reinitialize the tree.

It appears that your code is re-constructing the whole Diagram and its Model.

Instead, keep the Diagram instance – just create it once for the life of the page and the life of the host HTMLDivElement. Create the Model instance once and assign Diagram.model to do the initialization of the diagram.

You don’t say what kind of updates you need to make. The general answer is that you should be calling Model or TreeModel or GraphLinksModel methods to modify the model that the diagram has (as the vaue of Diagram.model).

Furthermore you need to make sure that all of the state that you wish to preserve is reflected in the properties of the data in the model. Mostly that means making sure that all of the properties you need are on the data and that there are Bindings from those data properties to the GraphObject/Node/Link properties in the template(s).

You can find many examples of this in the samples. Look for any sample that has “load” and “save” functions that save the current model in JSON format text to a on the page itself; loading just reads that text string and constructs a new model and assigns Diagram.model.