GoJS教程：图布局

图表具有默认布局，该布局采用没有位置的所有节点并为其提供位置，并将它们排列在 格中。我们可以明确地为每个节点提供一个位置来理清这个组织混乱，但作为一个更简单的解决方案，我们将使用一个自动为我们提供良好位置的布局。

下载GoJS最新版本

图布局

正如您所看到的，TreeModel会自动创建必要的链接以关联节点，但很难分辨谁是谁。

图表具有默认布局，该布局采用没有位置的所有节点并为其提供位置，并将它们排列在 格中。我们可以明确地为每个节点提供一个位置来理清这个组织混乱，但作为一个更简单的解决方案，我们将使用一个自动为我们提供良好位置的布局。

我们想要显示层次结构，并且已经在使用TreeModel，因此最自然的布局选择是TreeLayout。TreeLayout默认从左向右流动，因此要使其从上到下流动（在组织图中常见），我们将angle属性设置为90。

在GoJS中使用布局通常很简单。每种布局都有许多影响结果的属性。每个布局都有样本（如TreeLayout演示），展示其属性。

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

GoJS还有其他几种布局，到目前为止，将布局添加到图表和模型中，我们可以看到我们的结果：

var $ = go.GraphObject.make;var myDiagram =  $(go.Diagram, "myDiagramDiv",    {      "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 earliermyDiagram.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;

购买GoJS正版授权，请点击“咨询在线客服”哟！