GoJS教程：各种模型

使用自定义节点模板，我们的图表变得非常美观，但也许我们想要展示更多。也许我们想要一张组织结构图来表明Don Meow真的是猫卡特尔的老板。因此，我们将通过添加一些链接来显示各个节点之间的关系以及自动定位节点的布局，从而创建一个完整的组织结构图。

下载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 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 =[ // 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正版授权，请点击“咨询在线客服”哟！

来源：慧都