GoJS教程:图布局
图布局
正如您所看到的,TreeModel会自动创建必要的链接以关联节点,但很难分辨谁是谁。
图表具有默认布局,该布局采用没有位置的所有节点并为其提供位置,并将它们排列在网格中。我们可以明确地为每个节点提供一个位置来理清这个组织混乱,但作为一个更简单的解决方案,我们将使用一个自动为我们提供良好位置的布局。
我们想要显示层次结构,并且已经在使用TreeModel,因此最自然的布局选择是TreeLayout。TreeLayout默认从左向右流动,因此要使其从上到下流动(在组织图中常见),我们将angle属性设置为90。
在GoJS中使用布局通常很简单。每种布局都有许多影响结果的属性。每个布局都有样本(如TreeLayout演示),展示其属性。
// 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", { "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;
转载于:https://my.oschina.net/u/3905944/blog/3008843