GoJS学习-模型与模板

实现节点外观与节点数据分离的一种方法是使用数据模型和节点模板。

模型基本上只是一个数据集合，其中包含每个节点和每个链接的基本信息。

模板基本上只是一个可以复制的部分。您将为Node和Link具有不同的模板。

实际上，已经具有非常简单的节点和链接默认模板。如果要自定义图中节点的外观，可以通过设置Diagram.nodeTemplate来替换默认节点模板。

要自动使用模板，请为该图提供一个模型，其中包含每个节点的数据和每个链接的数据。

GraphLinksModel保持节点的数据和链接数据作为值的集合（实际上阵列） GraphLinksModel.nodeDataArray和GraphLinksModel.linkDataArray。然后，设置Diagram.model属性，以便该图可以为所有节点数据创建Node，并为所有链接数据创建Link。

模型解释并维护数据之间的引用。每个节点数据应具有唯一的键值，以便可以可靠地解析对节点数据的引用。模型还管理动态添加和删除数据。

型中的节点数据和链接数据可以是任何JavaScript对象。您可以决定这些对象具有哪些属性-根据需要添加任意数量的应用程序。由于这是JavaScript，因此您甚至可以动态添加属性。GoJS模型假定数据上存在几个属性，例如“键”（在节点数据上）和“类别”，“从”和“到”（后两个在链接数据上）。但是，可以通过设置名称以“ ... Property”结尾的模型属性来告诉模型使用不同的属性名称。

  var nodeDataArray = [
    { key: "Alpha"},
    { key: "Beta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

 这显示两个节点和一个链接，但是这些节点并没有按照我们想要的方式出现。因此，我们将自定义节点模板以展示。

  diagram.nodeTemplate =  // provide custom Node appearance
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "white" }),
      $(go.TextBlock,
        { text: "hello!",
          margin: 5 })
    );

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

 现在，该图看起来更好，但是尚未对节点进行参数化-它们都是相同的！我们可以通过使用数据绑定来实现该参数化。

使用数据绑定对节点进行参数化

数据绑定是一个声明性声明，其中应使用一个对象的属性值来设置另一个对象的属性值。

在这种情况下，我们要确保TextBlock.text属性获取相应节点数据的“键”值。并且我们要确保Shape.fill属性设置为相应节点数据的“ color”属性值所给定的颜色/画笔。

我们可以通过创建Binding对象并将其与目标GraphObject关联来声明此类数据绑定。您可以通过编程方式调用GraphObject.bind来执行此操作。但是，当使用go.GraphObject.make时，当您传递Binding时会自动发生。

diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "white" },  // 默认Shape.fill值
        new go.Binding("fill", "color")),  // 绑定 nodedata.color的值到fill
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))  // 绑定nodedata.key的值到TextBlock
    );

  var nodeDataArray = [
    { key: "Alpha", color: "lightblue" },  
    { key: "Beta", color: "pink" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

 您可能会注意到链接是不同的：它有一个箭头。当我们第一次使用代码构建此图时，没有箭头。但是默认的Diagram.linkTemplate包含一个箭头，在此示例中，我们没有用自定义模板替换链接模板。

请注意，上面模板中的Shape.fill值获得了两次值。首先将其默认值设置为“white”。然后，绑定将其设置为节点数据的“color”属性具有的任何值。如果节点数据不具有“ color”属性或在获取该值时出错，则能够指定保留的初始值可能会很有用。

我们还可以更加精确地了解模板是什么。模板是一个Part，它可能具有一些数据Binding，并且它本身并不是图中的一部分，但可以被复制以创建添加到图中的零件。

树模型

较简单的模型TreeModel仅支持形成树形图的链接关系。没有单独的链接数据，因此没有“ linkDataArray”。树中固有的父子关系由子节点数据上的额外属性确定，该属性通过其键引用父节点。如果未定义名称默认为“ parent”的该属性，则该数据的对应节点为树根。每个链接仍然是数据绑定的，但是链接的数据是子节点数据。

 diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "Ellipse" },
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", parent: "Alpha", color: "yellow" },  // note the "parent" property
    { key: "Gamma", parent: "Alpha", color: "orange" },
    { key: "Delta", parent: "Alpha", color: "lightgreen" }
  ];
  diagram.model = new go.TreeModel(nodeDataArray);

 许多面向树的示例都使用TreeModel而不是GraphLinksModel。但是，仅仅因为您的图形是树形结构并不意味着您必须使用TreeModel。

您可能会发现数据是用定义链接关系的单独“表”组织的，因此使用GraphLinksModel是最自然的。或者，您可能想使用TreeModel不支持的其他功能。

修改模型的值： 

     var node = myDiagram.model.findNodeDataForKey('Beta')
      myDiagram.model.setDataProperty(node,'color','red')

当JavaScript数组或对象已经是模型的一部分时，需要 调用诸如Model.addNodeData或Model.setDataProperty之类的模型方法。

首次为Model.nodeDataArray构建对象数组时， 或将JavaScript对象初始化为新的节点数据对象时，此类调用都是不必要的。但是，一旦数据成为模型的一部分，就需要调用模型的方法来实现更改。

保存和加载模型

GoJS不需要您以任何特定的介质或格式保存模型。但是因为这是JavaScript，而JSON是最流行的数据交换格式，所以我们确实使以JSON格式的文本形式编写和读取模型变得容易。

只需调用Model.toJson即可生成表示您的模型的字符串。 再次加载时，需要将JSON.parse格式化json数据

let modelJson=myDiagram.model.toJSON()
            
modelJson=JSON.parse(modelJson)
myDiagram.model=new go.GraphLinksModel(modelJson.nodeDataArray,modelJson.linkDataArray)