下載GoJS最新版本

圖布局

正如您所看到的，TreeModel會自動創(chuàng)建必要的鏈接以關(guān)聯(lián)節(jié)點(diǎn)，但很難分辨誰是誰。

圖表具有默認(rèn)布局，該布局采用沒有位置的所有節(jié)點(diǎn)并為其提供位置，并將它們排列在網(wǎng)格中。我們可以明確地為每個(gè)節(jié)點(diǎn)提供一個(gè)位置來理清這個(gè)組織混亂，但作為一個(gè)更簡單的解決方案，我們將使用一個(gè)自動為我們提供良好位置的布局。

我們想要顯示層次結(jié)構(gòu)，并且已經(jīng)在使用TreeModel，因此最自然的布局選擇是TreeLayout。TreeLayout默認(rèn)從左向右流動，因此要使其從上到下流動（在組織圖中常見），我們將angle屬性設(shè)置為90。

在GoJS中使用布局通常很簡單。每種布局都有許多影響結(jié)果的屬性。每個(gè)布局都有樣本（如TreeLayout演示），展示其屬性。

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

GoJS還有其他幾種布局，到目前為止，將布局添加到圖表和模型中，我們可以看到我們的結(jié)果：

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;

購買GoJS正版授權(quán)，請點(diǎn)擊“”喲！