vue中go.js的使用教学（四：模型及模板）

目录

一、使用代码构建图表

 二、使用模型和模板

a、创建基础图表

b、定义模板（将节点模板定义为我们上面所做的特定节点构造的泛化）

 三、使用数据绑定参数化节点

 a、使用数据绑定参数化节点

 扩展：修改模型

---

一、使用代码构建图表

场景，选中两个值，点击确定使他们生成一个相连的图表

让我们尝试构建两个节点并使用链接连接它们。这是一种方法：

eg:创建爱你两个node节点，并添加到diagram实例上，diagram是通过div上的id创建的那个。然后在通过添加一个go.Link，使node1链接node2.

var node1 =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "lightblue" }),
      $(go.TextBlock,
        { text: "Alpha",
          margin: 5 })
    )
  diagram.add(node1);

  var node2 =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "pink" }),
      $(go.TextBlock,
        { text: "Beta",
          margin: 5 })
    );
  diagram.add(node2);

  diagram.add(
    $(go.Link,
      { fromNode: node1, toNode: node2 },
      $(go.Shape)
    ));

生成的图 ：

 

 二、使用模型和模板

如果要自定义图中节点的外观，可以通过设置 Diagram.nodeTemplate 来替换默认节点模板。

若要自动使用模板，请为关系图提供一个模型，其中包含每个节点的数据和每个链接的数据。GraphLinksModel 将节点数据和链接数据的集合（实际上是数组）保存为 GraphLinksModel.nodeDataArray 和 GraphLinksModel.linkDataArray 的值。 然后设置 Diagram.model 属性，以便关系图可以为所有节点数据创建节点s，为所有链接数据创建链接s。

a、创建基础图表

特定的节点数据已被放入 JavaScript 对象数组中。我们在单独的链接数据对象数组中声明链接关系。每个链接数据都使用其键保存对节点数据的引用。通常，引用是“from”和“to”属性的值。

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

生成的图：

b、定义模板（将节点模板定义为我们上面所做的特定节点构造的泛化）

 diagram.nodeTemplate =  // 创建模板
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",//框类型
          fill: "white" }),//白色背景
      $(go.TextBlock,
        { text: "hello!",//显示为hello
          margin: 5 })
    );
   //模板的数组
  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" }
  ];
   //模板的线链接对象
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }//从Alpha链接到Beta
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

生成的图：节点尚未参数化 - 它们都是相同

 

 三、使用数据绑定参数化节点

 a、使用数据绑定参数化节点

我们要确保 TextBlock.text 属性获取相应节点数据的“键”值。我们希望确保 Shape.fill 属性设置为由相应节点数据的 “color” 属性值给出的颜色/画笔。可以通过创建 Binding 对象并将它们与目标 GraphObject 相关联来声明这样的数据绑定。

diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "white" },  // default Shape.fill value
        new go.Binding("fill", "color")),  // 把数组中的color绑定到Shape的fill上
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))  // // 把数组中的key值绑定到TextBlock的text上
    );

  var nodeDataArray = [
    { key: "Alpha", color: "lightblue" },  // 这边的值会被遍历循环
    { key: "Beta", color: "pink" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta"}
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

生成的图：

 

 扩展配置：树模型，从上到下链接

仅支持形成树结构图的链接关系。没有单独的链接数据，因此没有“linkDataArray”。

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" },  // 通过parent指定父亲指向自己
    { key: "Gamma", parent: "Alpha", color: "orange" },
    { key: "Delta", parent: "Alpha", color: "lightgreen" }
  ];
  diagram.model = new go.TreeModel(nodeDataArray);

生成的图:

 扩展：修改模型

如果要以编程方式添加或删除节点，则可能需要调用 Model.addNodeData 和 Model.removeNodeData 方法。使用 Model.findNodeDataForKey 方法查找特定节点数据对象（如果只有其唯一键值）。您也可以调用 Model.copyNodeData 来复制节点数据对象，然后可以修改该对象并将其传递给 Model.addNodeData。

简单地修改 Model.nodeDataArray 是行不通的，因为 GoJS 软件不会收到任何 JavaScript 数组任何更改的通知，因此没有机会根据需要添加或删除 Node或其他部分。

同样，简单地修改节点数据对象的属性也是行不通的。依赖于该属性的任何绑定都不会收到有关任何更改的通知，因此它将无法更新其目标 GraphObject 属性。例如，设置 color 属性不会导致 Shape 更改颜色。

var data = myDiagram.model.findNodeDataForKey("Delta");
    // 这个方式是不生效的
    if (data !== null) data.color = "red";

生效：

 var data = myDiagram.model.findNodeDataForKey("Delta");
    // 这个方式可以更新
    if (data !== null) myDiagram.model.setDataProperty(data, "color", "red");