GoJs中layout和model的更新

前言

在可视化图形的操作的时候，有的时候在不修改容器的情况下。可能会需要更改图形的布局和数据来实现不同的数据的不同的布局显示，更加容易进行对比分析数据达到数据分析的效果。

准备工作

首先我们以之前的布局和数据为基础，在此基础进行布局的更换和数据的更新。

nodes:[
      { key: "1", color: "#99FFFF",text:"三国",figure:"Rectangle" },
      { key: "1-1", color: "#FF0000",text:"魏",figure:"Circle" },
      { key: "1-2", color: "#FFFF66",text:"蜀",figure:"Circle"},
      { key: "1-3", color: "#0000FF",text:"吴",figure:"Circle" },
    ],
    links:[
      {
        from:"1",
        to:"1-1"
      },
      {
        from:"1",
        to:"1-2"
      },
      {
        from:"1",
        to:"1-3"
      },
    ]
    //methods
    this.myDiagram.nodeTemplate =
      $$(go.Node, "Vertical",
      { selectionAdorned: false,selectionChanged: this.onSelectionChanged }, 
      $$(go.Shape, "Circle",
          { width: 30, height: 30,name:"ICON" },
          new go.Binding("fill", "color"),
          new go.Binding("figure", "figure"),
        ),
      $$(go.TextBlock, 
          new go.Binding("text", "text")),
     );

图形的布局更新

图形的布局更新可以直接修改this.myDiagram.layout的配置就可以直接达到切换布局的效果，然后可以选择需要的布局进行对应的切换就可以了。

circleLayout(){
    this.myDiagram.layout = $$(go.CircularLayout);
  },
  forceDirectedLayout(){
    this.myDiagram.layout = $$(go.ForceDirectedLayout);
  },

这里的举例说明只是简单的说明了其布局改变的使用方法，第一个参数为布局类型的。可以是系统的默认布局，也可以是自定义的布局类型。然后后面还可以追加参数，是布局的设置的属性值。例如树形布局的旋转方向等等。

图形的数据更新

图形数据更新可以通过this.myDiagram.model重新传入需要修改的数据就可以了。

changeData(){
    let nodes = [
      { key: "2", color: "#99FFFF",text:"蜀汉五虎将",figure:"Rectangle" },
      { key: "2-1", color: "#FF0000",text:"关羽",figure:"Circle" },
      { key: "2-2", color: "#FFFF66",text:"张飞",figure:"Circle"},
      { key: "2-3", color: "#0000FF",text:"赵云",figure:"Circle" },
      { key: "2-4", color: "#00FF00",text:"马超",figure:"Circle" },
      { key: "2-5", color: "#67B73C",text:"黄忠",figure:"Circle" },
    ]
    let links = [
      {
        from:"2",
        to:"2-1"
      },
      {
        from:"2",
        to:"2-2"
      },
      {
        from:"2",
        to:"2-3"
      },
      {
        from:"2",
        to:"2-4"
      },
      {
        from:"2",
        to:"2-5"
      },
    ]
    this.myDiagram.model = new go.GraphLinksModel(nodes,links)
  }

这里说明一下，在数据的更新的过程中我们可以使用新的数据覆盖掉之前的数据，也可以在原有数据的基础上追加数据。如果在原有的数据上追加数据的话，但是需要注意的一点就是每一个节点和连线都会有个gojs渲染的id为__gohashid。如果是更新数据数据的话，去除重复数据的话要优先保留__gohashid的数据，否则的话很容易导致渲染的数据和布局存在很多意料之外的问题。

总结

在更新布局layout和模型model的时候，只是对该属性传入新的属性或者新的布局值就可以了。在传入的过程中，仍然可以传递很多的属性配置的值。