Changes to orgchart

GoJS
1

I currently have orgchart like this:
www.nwoods.com/forum/uploads/5813/now.png

But I would like to have it like this:
www.nwoods.com/forum/uploads/5813/new.png

How can this be made?

I’ve created custom code to make orgchart as I desire (some need to be aligned horizontaly, some vertically)

myDiagram.layout.assignTreeVertexValues = function(v) {
    if(v.od.data.halign=="true"){
        v.angle = 90;
    }else{
        v.angle = 0;
    }
};

If anyone can help me, I would really appreciate it!

2

It looks like you want a TreeLayout whose “last parents” (i.e. parent nodes whose children are all leaf nodes) want to lay out their children in a vertical stack.

You can do that without overriding any TreeLayout methods by using these properties on the TreeLayout:

$(go.Diagram, "myDiagramDiv", { . . . layout: $(go.TreeLayout, { treeStyle: go.TreeLayout.StyleLastParents, arrangement: go.TreeLayout.ArrangementHorizontal, // properties for most of the tree: angle: 90, layerSpacing: 35, // properties for the "last parents": alternateAngle: 0, alternateLayerSpacing: 35, alternateAlignment: go.TreeLayout.AlignmentStart, alternateNodeIndent: 10, alternateNodeIndentPastParent: 1.0, alternateNodeSpacing: 10, alternateLayerSpacing: 30, alternateLayerSpacingParentOverlap: 1.0, alternatePortSpot: new go.Spot(0.01, 1, 10, 0), alternateChildPortSpot: go.Spot.Left }), . . .

3

It is not “last parents”, it depends on “halign” parameter on each node. My question is just how to put that Yellow node below red and not next to it.
This is how it looks like:
http://www.nwoods.com/forum/uploads/5813/index.jpg

Thank you for your reply, though.

4

First, you should not be depending on the minified names of any properties in your code. You want to write: v.node.data.halign

Second, I’m not sure what you want, but I suspect setting some more of the properties that I showed above would help. Just remember that properties named “alternate…” on TreeLayout are just values for TreeVertex properties named without the “alternate” prefix.

5

First thank you for your reply.

I don’t know how to say it other than with picture.

http://www.nwoods.com/forum/uploads/5813/how.jpg

The top is how I have it, the bottom is how I want it (I want yellow ones below red ones, not beside them. And green ones below red and not beside.

Below are my settings.

function init() { if (window.goSamples) goSamples(); var $ = go.GraphObject.make; // for conciseness in defining templates myDiagram = $(go.Diagram, "myDiagram", // the DIV HTML element { initialDocumentSpot: go.Spot.TopLeft, initialViewportSpot: go.Spot.TopRight, allowMove : false, scale:0.35, layout: // create a TreeLayout $(go.TreeLayout, { treeStyle: go.TreeLayout.StyleLastParents, angle: 90, alignment: go.TreeLayout.AlignmentStart, layerSpacing: 80, nodeSpacing: 15, }) }); // Custom Layout myDiagram.layout.assignTreeVertexValues = function(v) { if(v.node.data.halign=="true"){ v.angle = 90; }else{ v.angle = 0; } }; // } Thank you for your effort!!
6

First, “alternateChildPortSpot” is not a defined property on TreeVertex, as I explained above. You should be setting v.childPortSpot.

Second, there is no go.Spot.Down. That’s just undefined.

I suggest you set the TreeVertex properties in your assignTreeVertexValues override that I earlier did via the TreeLayout.alternate… default properties. You’ll want to set those properties on all TreeVertexes corresponding to red Nodes and all of their children.

7

May be your code will be like this:

myDiagram.layout.assignTreeVertexValues = function(v) {
    if(v.od.data.halign=="true"){
        v.alignment = go.TreeLayout.AlignmentBottomRightBus;
    }else{
        
    }
};

Yes, it will set the align of nodes to be “Vertical” or “Horizontal” on every node, you can controll it.