Quantcast
Channel: Northwoods Software - Latest topics
Viewing all articles
Browse latest Browse all 7425

Expanding a Leaf node of Incremental Tree overlaps new nodes on the existing nodes

$
0
0

@phreq wrote:

I created an Incremental Tree as:

      `var $ = go.GraphObject.make;  // for conciseness in defining templates

        myDiagram =
          $(go.Diagram, "myTreeDiv",  // must name or refer to the DIV HTML element
            {
                initialContentAlignment: go.Spot.Center,
                initialAutoScale: go.Diagram.UniformToFill,
                contentAlignment: go.Spot.Center,
                layout: $(go.ForceDirectedLayout),
                // moving and copying nodes also moves and copies their subtrees
                "commandHandler.copiesTree": true,  // for the copy command
                "commandHandler.deletesTree": false, // for the delete command
                "draggingTool.dragsTree": true,  // dragging for both move and copy
                "undoManager.isEnabled": true
            });

        // Define the Node template.
        // This uses a Spot Panel to position a button relative
        // to the ellipse surrounding the text.
        myDiagram.nodeTemplate =
          $(go.Node, "Auto",
            {
                selectionObjectName: "PANEL",
                isTreeExpanded: true,
                isTreeLeaf: true
            },
            // the node's outer shape, which will surround the text
              $(go.Shape, "Circle",
                {name: "SHAPE", height: 60, fill: "whitesmoke", stroke: "black" },
                new go.Binding("fill", "color", function (dist) {
                    //dist = Math.min(blues.length - 1, dist);
                    return go.Brush.randomColor();//blues[dist];
                })),
              $(go.TextBlock,
                { font: "6pt sans-serif" },
                new go.Binding("text", "text")),
            // the expand/collapse button, at the top-right corner
            $("TreeExpanderButton",
            {
                width: 20, height: 20,
                alignment: go.Spot.TopRight,
                alignmentFocus: go.Spot.TopRight
            },
            { visible: true })  // end TreeExpanderButton
          );  // end Node`

And I insert the data in it as:

        `var nodeDataArray = [];

        for (var i = 0; i < seldiagnosysgroups.options.length; i++) {
            if (seldiagnosysgroups.options[i].selected) {
                for (var j = 0; j < arr_rsSort.length; j++) {
                    item = {}
                    item["key"] = seldiagnosysgroups.options[i].value + "_" + arr_rsSort[j].group_diagnosis;
                    item["text"] = arr_rsSort[j].group_diagnosis;
                    item["cnt"] = 0;
                    item["color"] = go.Brush.randomColor();
                    item["parent"] = seldiagnosysgroups.options[i].value + "_";
                    item["share"] = 0;
                    nodeDataArray.push(item);
                }
            }
        }
      ---
      ---
      ---
      myDiagram.model = new go.TreeModel(nodeDataArray);

        myDiagram.nodes.each(function (n) {
            if (n.data.text.indexOf("Count") >= 0) {
                if (n.data.cnt < 30)
                    n.collapseTree();
            }
        })

`

This works absolutely fine and I get the diagram as:

But whenever I click on any leaf node to expand, it overlaps the new nodes on the existing nodes as:

Hence, completely messing up the diagram. So what can I do to open the leaf nodes in the blank area and not on the existing nodes?

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 7425

Latest Images

Trending Articles



Latest Images