Invalid div id; div already has a Diagram associated with it

@vassilis wrote:

I'm getting this error when I'm trying to build by diagram based on an async request.

Error:

EXCEPTION: Invalid div id; div already has a Diagram associated with it.

On my ngOnInit I'm making a http request and on the response I'm running this function (demo):

myFunc(project) {

    // create a make type from go namespace and assign it to MAKE
    const MAKE = go.GraphObject.make;

    // get the div in the HTML file
    const diagramDiv = this.relationsDiv.nativeElement;

    // instatiate MAKE with Diagram type and the diagramDiv
    const myDiagram =
      MAKE(go.Diagram, diagramDiv,
        {
            initialContentAlignment: go.Spot.Center, // center Diagram contents
            '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: 35 })
        });

    // the template we defined earlier
    myDiagram.nodeTemplate =
      MAKE(go.Node, 'Horizontal',
        {
          background: '#fab700',
          locationSpot: go.Spot.Center
        },
        MAKE(go.Picture,
            { margin: 5, width: 30, height: 30, background: '<i class="fa fa-th"></i>' },
            new go.Binding('source')),
        MAKE(go.TextBlock, 'Default Text',
            { margin: 5, stroke: 'white', font: '16px sans-serif' },
            new go.Binding('text', 'name'))
      );

    // define a Link template that routes orthogonally, with no arrowhead
    myDiagram.linkTemplate =
      MAKE(go.Link,
          { routing: go.Link.Orthogonal, corner: 5 },
          MAKE(go.Shape, { strokeWidth: 2, stroke: '#343434' })); // the link shape

    let model = MAKE(go.TreeModel);
    model.nodeDataArray =
      [
          { key: '1',              name: 'Don Meow' },
          { key: '2', parent: '1', name: 'Roquefort' },
          { key: '3', parent: '1', name: 'Toulouse' },
          { key: '4', parent: '3', name: 'Peppo' },
          { key: '5', parent: '3', name: 'Alonzo' },
          { key: '6', parent: '2', name: 'Berlioz' }
      ];
    myDiagram.model = model;

  }

Now, this function WORKS especially if I come from another Route without any errors. If I refresh though the page the rendering still happens BUT I'm getting the error I wrote above in my console.

Any ideas on this?

Posts: 1

Participants: 1

Read full topic