How to set Diagram.div = null property to unassociate html DOM for div element?


Below, script i am generating tree node template dynamically. First time tree node template loading perfectly but when i generate next time am getting “Invalid div ID, div already associate with diagram”. Then I surfed google and i got answer to set Diagram.div = null.

But my question is,

Where shall i set diagram,div = null?
in below script after generated tree node, i am set up diagram.div = null. is that correct??

Please help me.

var make = go.GraphObject.make;
myDiagram = make(go.Diagram, “myDiagramDiv”,
initialContentAlignment: go.Spot.Top, // center Diagram contents
allowDrop: true,
“undoManager.isEnabled”: true, // enable Ctrl-Z to undo and Ctrl-Y to redo
layout: make(go.TreeLayout, // specify a Diagram.layout that arranges trees
{ angle: 90, layerSpacing: 55, nodeSpacing: 20, })

                myDiagram.nodeTemplate =
                make(go.Node, "Horizontal", { background: "#d7d3c8" },
                make(go.Picture, { margin: 5, width: 30, height: 20 }, new go.Binding("source")),
                make(go.TextBlock, "Default Text", { margin: 12, stroke: "black", font: "bold 10px sans-serif" },
                                     new go.Binding("text", "name")),
                                         toolTip:  // define a tooltip for each node that displays the color as text
                                           make(go.Adornment, "Auto",
                                             make(go.Shape, { fill: "#FFFFCC" }),
                                             make(go.TextBlock, { margin: 4 },
                                               new go.Binding("text", "name"))
                                           )  // end of Adornment


                // define a Link template that routes orthogonally, with no arrowhead
                myDiagram.linkTemplate =
                    make(go.Link, { routing: go.Link.Orthogonal, corner: 5 },
                          make(go.Shape,   // the "from" end arrowhead
                            { fromArrow: "Chevron" }),
                           //   $(go.Shape),                           // this is the link shape (the line)
                       make(go.Shape, { strokeWidth: 2, stroke: "#555", toArrow: "Standard", fill: "red" })// this is an arrowhead
                                                                        //{ toArrow: "OpenTriangle", fill: null }

                var model = make(go.TreeModel);
                model.nodeDataArray = eval(json);
                myDiagram.model = model;
  1. var element = document.getElementById(‘myDiagramDiv’);

  2. myDiagram.element = null;

I do not understand the situation that you have the “first” time and the “next” time.

At the “first” time, has the HTML DIV element just been created? So it’s available for use by a new Diagram?

At the “next” time, that same DIV element is still in the DOM, yes? What has happened to the old Diagram object?

It seems to me that as soon as the first Diagram is no longer desired, you should set its Diagram.div to null. Then if a “next” time happens, the state is the same as it was the “first” time.

Part of your cleanup will probably also require removing any listeners that you have added to the Diagram.

Thanks for your replay Walter. Can you tell me how do i set Diagram.div = null. I have used like below, is that correct,

var element = document.getElementById(‘myDiagramDiv’);
myDiagram.element = null;


There is no “element” property.

To get any Diagram associated with an HTML DIV element: go.Diagram.fromDiv(aDivReference).

To get or set the DIV associated with a Diagram: aDiagram.div or aDiagram.div = null.