1. Use code to build charts

Scenario, select two values, click OK to make them generate a connected graph

Let's try to build two nodes and connect them using a link. Here's one way:

eg: Create two node nodes that love you and add them to the diagram instance. The diagram is the one created through the id on the div. Then make node1 link node2 by adding a go.Link.

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)
    ));

Generated plot:

2. Using models and templates

If you want to customize the appearance of the nodes in the diagram, you can replace the default node template by setting Diagram.nodeTemplate .

To automatically use a template, provide the graph with a model that contains data for each node and data for each link. GraphLinksModel holds collections (actually arrays) of node data and link data as values of GraphLinksModel.nodeDataArray and GraphLinksModel.linkDataArray . Then set the Diagram.model property so that the diagram can create node s for all node data and link s for all link data.

a. Create a basic chart

Specific node data has been put into an array of JavaScript objects. We declare link relationships in a separate array of link data objects. Each link data holds a reference to the node data using its key. Typically, references are the values of the "from" and "to" attributes.

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

Generated plot:

b. Define a template (define a node template as a generalization of the specific node construction we did above)

 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);

Generated graph: Nodes have not been parameterized - they are all the same

3. Use data binding to parameterize nodes

a. Use data binding to parameterize nodes

We want to make sure that the TextBlock.text property gets the "key" value of the corresponding node's data. We want to ensure that the Shape.fill property is set to the color/brush given by the value of the "color" property of the corresponding node data. Such data bindings can be declared by creating Binding objects and associating them with the target 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);

Generated plot:

Extended configuration: tree model, linked from top to bottom

Only link relationships forming tree-structured graphs are supported. There is no separate link data, hence no "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);

Generated graph:

Extension: modifying the model

If you want to add or remove nodes programmatically, you may need to call the Model.addNodeData and Model.removeNodeData methods. Use the Model.findNodeDataForKey method to find a specific node data object (if only its unique key value). You can also call Model.copyNodeData to copy the node data object, which can then be modified and passed to Model.addNodeData .

Simply modifying the Model.nodeDataArray won't work because the GoJS software won't be notified of any changes to the JavaScript array, so there's no chance to add or remove Nodes or other parts as needed .

Also, simply modifying the properties of the node data object won't work. Any binding that depends on this property will not be notified of any changes, so it will not be able to update its target GraphObject property. For example, setting the color property does not cause the Shape to change color.

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

Effective:

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

Teaching of the use of go.js in vue (four: models and templates)

1. Use code to build charts

2. Using models and templates

a. Create a basic chart

b. Define a template (define a node template as a generalization of the specific node construction we did above)

3. Use data binding to parameterize nodes

a. Use data binding to parameterize nodes

Extension: modifying the model

Guess you like