下載GoJS最新版本

各種模型

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

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

在GraphLinksModel，我們model.linkDataArray除了model.nodeDataArray。它包含一組JavaScript對象，每個對象通過指定“to”和“from”節(jié)點鍵來描述鏈接。這是節(jié)點A鏈接到節(jié)點B并且節(jié)點B鏈接到節(jié)點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允許您在節(jié)點之間擁有任意數(shù)量的鏈接，朝向任何方向。可能有十個鏈路從A到B運行，另外三個從B到A運行相反的方式。

TreeModel的工作方式略有不同。不是維護(hù)單獨的鏈接數(shù)據(jù)數(shù)組，而是通過為節(jié)點數(shù)據(jù)指定“父”來創(chuàng)建樹模型中的鏈接。然后從該關(guān)聯(lián)創(chuàng)建鏈接。這是與TreeModel相同的示例，其中節(jié)點A鏈接到節(jié)點B，節(jié)點B鏈接到節(jié)點C：

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

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

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

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正版授權(quán)，請點擊“”喲！