下載GoJS最新版本

各種模型

使用自定義節點模板，我們的圖表變得非常美觀，但也許我們想要展示更多。也許我們想要一張組織結構圖來表明Don Meow真的是貓卡特爾的老板。因此，我們將通過添加一些鏈接來顯示各個節點之間的關系以及自動定位節點的布局，從而創建一個完整的組織結構圖。

為了獲得我們的圖表的鏈接，基本Model不會削減它。我們將不得不在GoJS中選擇其他兩個模型中的一個，這兩個模型都支持鏈接。這些是GraphLinksModel和TreeModel。

在GraphLinksModel，我們model.linkDataArray除了model.nodeDataArray。它包含一組JavaScript對象，每個對象通過指定“to”和“from”節點鍵來描述鏈接。這是節點A鏈接到節點B并且節點B鏈接到節點C的示例：

var model = $（go.GraphLinksModel）;
model.nodeDataArray =
[
  { key：“A” }，
  { key：“B” }，
  { key：“C” }
]。
model.linkDataArray =
[
  { from：“A”，to：“B” }，
  { from：“B”，to：“C” }
]。
myDiagram.model = model;

GraphLinksModel允許您在節點之間擁有任意數量的鏈接，朝向任何方向。可能有十個鏈路從A到B運行，另外三個從B到A運行相反的方式。

TreeModel的工作方式略有不同。不是維護單獨的鏈接數據數組，而是通過為節點數據指定“父”來創建樹模型中的鏈接。然后從該關聯創建鏈接。這是與TreeModel相同的示例，其中節點A鏈接到節點B，節點B鏈接到節點C：

var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B", parent: "A" },
  { key: "C", parent: "B" }
];
myDiagram.model = model;

TreeModel比GraphLinksModel簡單，但它不能建立任意鏈接關系，例如同一個兩個節點之間的多個鏈接，或者具有多個父節點。我們的組織圖是一個簡單的分層樹狀結構，因此我們將為此示例選擇TreeModel。

首先，我們將通過添加更多節點，使用TreeModel以及在數據中指定鍵和父項來完成數據。

var $ = go.GraphObject.make;
var myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
    });

// 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 =
[ // the "key" and "parent" property names are required,
  // but you can add whatever data properties you need for your app
  { 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正版授權，請點擊“”喲！