@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