正如你可以看到的，TreeModel自动创建需要的节点间的链接，但是它很难确定谁的父节点是谁。
图表(Diagram)有一个缺省布局会管理那些没有具体位置的节点，会自动分配一个位置。我们可以显示的给每个节点分配一个位置来给组织排序，但是在我们的例子中一个更容易的解决方案是，我们会使用布局来自动排列位置。

我们想要来显示一个层级，而且已经用了TreeModel，因此最自然的方式是使用TreeLayout。TreeLayout缺省的是从左到右，因此为了表示从上到下的我们会将angle属性设置为90.

在GoJS中使用布局通常很简单。每种类型的布局有一些属性能影响结果。每种布局都是有例子的：(比如TreeLayout Demo)


// define a TreeLayout that flows from top to bottom
myDiagram.layout =
  $(go.TreeLayout,
    { angle: 90, layerSpacing: 35 });

GoJS 有许多其它的布局，你可以看这里.
给图表添加布局，我们可以看到如下结果：

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#44CCFF" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;

Paste_Image.png

这个图表看起来像是组织机构那么回事，但是我们可以做得更好。

链接模板(Link templates)

我们会构建一个新的链接模板（link template），这个模板可以更好的适应我们的宽的盒状的节点。链接Link是一个不同于Node的部分。链接主要的元素是链接的形状，而且必须是一个由 GoJS动态计算出来的形状。我们的链接是将会包含形状形状、比一般黑色的更宽一点的灰色笔画。不像缺省的链接模板，我们不会有箭头。而且我们会将Link routing 属性从Normal修改为Orthogonal，而且给他一个拐角值因此角会变园。


// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    // default routing is go.Link.Normal
    // default corner is 0
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" }) // the link shape

    // if we wanted an arrowhead we would also add another Shape with toArrow defined:
    // $(go.Shape, { toArrow: "Standard", stroke: null }
    );

综合我们的链接模板、节点模板、TreeModel和Treelayou，我们最终得到了一个完整的组织架构图。完整的代码在下面，紧跟的是生成的结果图：

var $ = go.GraphObject.make;

var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      initialContentAlignment: go.Spot.Center, // center Diagram contents
      "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
      layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
                { angle: 90, layerSpacing: 35 })
    });

// the template we defined earlier
myDiagram.nodeTemplate =
  $(go.Node, "Horizontal",
    { background: "#44CCFF" },
    $(go.Picture,
      { margin: 10, width: 50, height: 50, background: "red" },
      new go.Binding("source")),
    $(go.TextBlock, "Default Text",
      { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
      new go.Binding("text", "name"))
  );

// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
  $(go.Link,
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // the link shape

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;

更详细的布局例子参考：https://gojs.net/latest/intro/layouts.html

gojs 图表(Diagram)布局

链接模板(Link templates)

猜你喜欢