如何编辑基本图表的go.js组模板？

Question

I want to create a Directed Acyclic Graph as shown in image 2. I'm using go.js basic charts . But after setting nodedataarray and linkdatarray , it outputs as in image 1. To generate the graph in image 2, I want two things to be done.

1. Display node templates horizontally in a group template.

2. Set levels(positions) for group templates.

I read examples given on the web site and I couldn't find a way. Please help me to solve above two problems.

---

image 1

image 2

Answer 1

I think you want the Diagram.layout to be a LayeredDigraphLayout and the Group.layout to be a GridLayout .

The Diagram could be set up with:

  $(go.Diagram, "myDiagramDiv",element
    {
      layout:
        $(go.LayeredDigraphLayout,
          { direction: 90, layerSpacing: 50 }),
      . . .
    });

The Group template could be something like:

$(go.Group, go.Panel.Vertical,
    {
      layout: $(go.GridLayout, { wrappingColumn: 4 }),
      . . .
    },
    $(go.TextBlock, . . .),
    $(go.Panel, "Auto",
      $(go.Shape, . . .),
      $(go.Placeholder, . . .)
    )
);