hi i making a double tree example with gojs but i need a top parts and bootom parts not left and right i have litte problem to make a top part i use the example from examples area heres the code…
note: the bootom part its ok but i cant make the top part i change the angle but steel not working thank you for the help
function init() {
if (window.goSamples) goSamples();
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagram",
{ contentAlignment: go.Spot.Center });
var graygrad = $(go.Brush, go.Brush.Linear, { 0: "#F5F5F5", 1: "#F1F1F1" });
var bluegrad = $(go.Brush, go.Brush.Linear, { 0: "#CDDAF0", 1: "#91ADDD" });
var yellowgrad = $(go.Brush, go.Brush.Linear, { 0: "#FEC901", 1: "#FEA200" });
var lavgrad = $(go.Brush, go.Brush.Linear, { 0: "#EF9EFA", 1: "#A570AD" });
myDiagram.nodeTemplate =
$(go.Node, go.Panel.Auto,
{ isShadowed: true },
new go.Binding("text", "key"),
$(go.Shape, "RoundedRectangle",
{ fill: graygrad,
stroke: "#D8D8D8" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 5, font: "bold 11px Helvetica, bold Arial, sans-serif" },
new go.Binding("text", "key")));
myDiagram.linkTemplate =
$(go.Link,
{ selectable: false },
$(go.Shape));
var dataNivelesCausa = problemModule.varNivelesCausa();
var dataNivelesEfecto = problemModule.varNivelesEfecto();
var problema = gon.problem_problema;
var model = new go.TreeModel();
var node = new go.Node();
var nodeDataArray = [];
var root = problema[0]["name"];
nodeDataArray.push({ key: problema[0]["name"], color: lavgrad, setKeyForNodeData: 0} );
for (var i = 0; i < dataNivelesCausa.length; i++) {
for (var b = 0; b < dataNivelesCausa<em>.length; b++) {
if(i === 0){
nodeDataArray.push({ key: dataNivelesCausa<em><strong>['content'],dir: "right", parent: problema[0]["name"], color: yellowgrad} );
} else if(i === 1){
nodeDataArray.push({ key:dataNivelesCausa<em><strong>['content'],parent:dataNivelesCausa<em><strong>['parent'], color: yellowgrad} );
}
else if(i === 2){
nodeDataArray.push({ key:dataNivelesCausa<em><strong>['content'],parent:dataNivelesCausa<em><strong>['parent'], color: yellowgrad} );
}
else if(i === 3){
nodeDataArray.push({ key:dataNivelesCausa<em><strong>['content'],parent:dataNivelesCausa<em><strong>['parent'], color: yellowgrad} );
} else if(i === 4){
nodeDataArray.push({ key:dataNivelesCausa<em><strong>['content'],parent:dataNivelesCausa<em><strong>['parent'], color: yellowgrad} );
} else if(i === 5){
nodeDataArray.push({ key:dataNivelesCausa<em><strong>['content'],parent:dataNivelesCausa<em><strong>['parent'], color: yellowgrad} );
} else if(i === 6){
nodeDataArray.push({ key:dataNivelesCausa<em><strong>['content'],parent:dataNivelesCausa<em><strong>['parent'], color: yellowgrad} );
} else if(i === 7){
nodeDataArray.push({ key:dataNivelesCausa<em><strong>['content'],parent:dataNivelesCausa<em><strong>['parent'], color: yellowgrad} );
}
};
};
for (var i = 0; i < dataNivelesEfecto.length; i++) {
for (var b = 0; b < dataNivelesEfecto<em>.length; b++) {
if(i === 0){
nodeDataArray.push({ key: dataNivelesEfecto<em><strong>['content'],dir: "left", parent: problema[0]["name"], color: yellowgrad} );
} else if(i === 1){
nodeDataArray.push({ key:dataNivelesEfecto<em><strong>['content'],parent:dataNivelesEfecto<em><strong>['parent'], color: yellowgrad} );
}
else if(i === 2){
nodeDataArray.push({ key:dataNivelesEfecto<em><strong>['content'],parent:dataNivelesEfecto<em><strong>['parent'], color: yellowgrad} );
}
else if(i === 3){
nodeDataArray.push({ key:dataNivelesEfecto<em><strong>['content'],parent:dataNivelesEfecto<em><strong>['parent'], color: yellowgrad} );
} else if(i === 4){
nodeDataArray.push({ key:dataNivelesEfecto<em><strong>['content'],parent:dataNivelesEfecto<em><strong>['parent'], color: yellowgrad} );
} else if(i === 5){
nodeDataArray.push({ key:dataNivelesEfecto<em><strong>['content'],parent:dataNivelesEfecto<em><strong>['parent'], color: yellowgrad} );
} else if(i === 6){
nodeDataArray.push({ key:dataNivelesEfecto<em><strong>['content'],parent:dataNivelesEfecto<em><strong>['parent'], color: yellowgrad} );
} else if(i === 7){
nodeDataArray.push({ key:dataNivelesEfecto<em><strong>['content'],parent:dataNivelesEfecto<em><strong>['parent'], color: yellowgrad} );
}
};
};
model.nodeDataArray = nodeDataArray;
myDiagram.model = model;
var leftParts = new go.Set(go.Part);
var rightParts = new go.Set(go.Part);
separatePartsByLayout(myDiagram, leftParts, rightParts,root);
var layout1 =
$(go.TreeLayout,
{ angle: 360,
arrangement: go.TreeLayout.ArrangementFixedRoots,
setsPortSpot: false });
var layout2 =
$(go.TreeLayout,
{ angle: 90,
arrangement: go.TreeLayout.ArrangementFixedRoots,
setsPortSpot: false });
layout1.doLayout(leftParts);
layout2.doLayout(rightParts);
}
function separatePartsByLayout(diagram, leftParts, rightParts,root) {
var root = diagram.findNodeForKey(root);
if (root === null) return;
leftParts.add(root);
rightParts.add(root);
var it = root.findTreeChildrenNodes();
while (it.next()) {
var child = it.value;
var dir = child.data.dir;
var coll = (dir === "left") ? leftParts : rightParts;
coll.addAll(child.findTreeParts());
coll.add(child.findTreeParentLink());
}
}