Replacing Diagrams and Models

Many applications will require the programmer to show different Diagrams in the same content area of the page. This is especially common in single-page webapps. Often, you do not need to remove the Diagram, and create another one, to do this. Since the Diagram is analogous to a view in a model-view architecture, you can instead replace the Diagram.model, and perhaps other settings, like the Diagram.nodeTemplateMap or Diagram.layout. Or you could build larger template maps that accommodate all Models you wish to present.

This example swaps Diagram.model between two very different sets of node/link data. The GraphLinksModel.linkDataArrays share the same link template across both models, and so the links look the same, while the GraphLinksModel.nodeDataArrays define differnet Part.categorys, allowing them utilize difference Node templates to more drastically change appearance.

Note that changing the Model destroys all state not kept in the Model, such as the currently selected Parts, and if there are no data bindings for them, the positions of all Nodes as well, and so on. These can be saved in the Model before switching, when they are relevant.

Two Diagrams re-using one div

Sometimes users want to work on two or more Diagrams at once and keep all Diagram state without repeatedly saving changes to the model. If this is the case, you may wish to put two Diagrams on the page (as all samples with a Palette do), or you may wish to put Diagrams into multiple "tabs" or some other mechanism, like the Vending Machine Planogram sample does with its two Palettes (a simpler version of this is the regular Planogram sample with four Palettes).

Alternatively, you may wish to display the two Diagrams in the same div, one at a time, by swapping them out. You can swap the div by setting Diagram.div to null on the first Diagram, and setting the div on the second.

If you select a Node and move it, and toggle Diagrams back and forth, you will see that the selection and Node positioning persists. Both Diagrams remain in memory, only the div is swapped to use one or the other.

Permanently deleting a Diagram

You may wish to remove a Diagram and ensure it leaves no memory footprint. To do this, if you have not created any other references to your Diagram or GraphObjects or Tools or Layouts within, you can write:

If you have used Pictures, you should also clear the Picture cache, which GoJS creates to store a map of source URLs to Image elements: