Gojs.net -> samples -> DOM Tree : Update Graph after new elements are insert

Hi I use this example to visualize my HTML DOM Tree: HTML DOM Tree

I dynamically insert new

elements with JQuery and I need a way to update the DOM Tree graph.

if I just call the init() function again I get the error Invalid div id; div already has a Diagram associated with it.

Is there an easy way to update the whole diagram ?

Do this part of the init function again:

    var nodeDataArray = [];
    // build up the tree
    traverseDom(document.activeElement, null);

    // create the model for the DOM tree
    myDiagram.model =
      $(go.TreeModel, {
        isReadOnly: true,  // don't allow the user to delete or copy nodes
        nodeDataArray: nodeDataArray
      });

I highly recommend that you learn about how to use GoJS by reading Get Started with GoJS and then all of the Introduction pages: GoJS Introduction -- Northwoods Software.

Here’s a modified traverseDom function:

  // Walk the DOM, starting at document, and return an Array of node data objects representing the DOM tree
  // Typical usage: traverseDom(document.activeElement)
  // The second and third arguments are internal, used when recursing through the DOM
  function traverseDom(node, parentName, dataArray) {
    if (parentName === undefined) parentName = null;
    if (dataArray === undefined) dataArray = [];
    // skip everything but HTML Elements
    if (!(node instanceof Element)) return;
    // Ignore the menu on the left of the page
    if (node.id === "menu") return;
    // add this node to the nodeDataArray
    var name = getName(node);
    var data = { key: name, name: name };
    dataArray.push(data);
    // add a link to its parent
    if (parentName !== null) {
      data.parent = parentName;
    }
    // find all children
    var l = node.childNodes.length;
    for (var i = 0; i < l; i++) {
      traverseDom(node.childNodes[i], name, dataArray);
    }
    return dataArray;
  }

Here’s how you can use it:

    // create the model for the DOM tree
    myDiagram.model =
      $(go.TreeModel, {
        isReadOnly: true,  // don't allow the user to delete or copy nodes
        // build up the tree in an Array of node data
        nodeDataArray: traverseDom(document.activeElement)
      });

Hi, I have tried the first solution and I get this error:
Uncaught Error: Diagram.model value is not an instance of Model: [object Object]

What is the value of $ at the time that you evaluated the code?

ok solved ! Thank you.

I did not recognize that $ is assigned $ = go.GraphObject.make; so this assignemend was not visible in this scope. I thought that console.log($ === jQuery); // "true"