GOJS学习笔记：基础使用2-lesson2

dom结构：<div id="myDiagramDiv" style="width:600px; height:550px; background-color: #DAE4E4;"></div>

知识点：
1.另外中Init初始化方式
2.定义linkTemplate模板
3.定义Group组和组成员
4.节点连接组

mounted(){
    this.goIntro()
},

goIntro(){
    var $=go.GraphObject.make
    var diagram=$(go.Diagram,'myDiagramDiv') //换了种init方式
    // var diagram=new go.Diagram('myDiagramDiv')
    diagram.initialContentAlignment=go.Spot.Center //设置图标对齐
    //定义节点模板
    diagram.nodeTemplate=
        $(go.Node,go.Panel.Auto,
            $(go.Shape,
                {figure:"RoundedRectangle"},
                new go.Binding('fill','color')
            ),
            $(go.TextBlock,'text',{margin:10},
                new go.Binding('text','key')
            )
        )
    //定义连接模板
    diagram.linkTemplate=
        $(go.Link,
            $(go.Shape,{strokeWidth:3},//第一个参数代表link连接本身
                new go.Binding('stroke','color')
            ),
            $(go.Shape,{toArrow:'Standard',stroke:null},//第二个参数代表连接箭头
                new go.Binding('fill','color2')
            )
        )
    //定义节点数据
    var nodeDataArray=[
        {key:'Alpha',color:'red'},
        {key:'Beta',color:'Orange'},
        {key:'GAMMA',color:'LightGreen'},
        {key:'DELTA',color:'Pink'},
        {key:'ZETA',isGroup:true},//定义组
        {key:'ZETA1',color:'#f60',group:'ZETA'},//定义组成员
        {key:'ZETA2',color:'#f90',group:'ZETA'},//定义组成员
    ]
    //定义连接
    var linkDataArray=[
        {from:'Alpha',to:'Beta',color:'red',color2:'blue'},//此处示例分别定义了连接线颜色和连接箭头颜色
        {from:'Alpha',to:'GAMMA'},
        {from:'Beta',to:'Beta'},
        {from:'GAMMA',to:'DELTA'},
        {from:'DELTA',to:'Alpha'},
        {from:'Alpha',to:'ZETA'},//节点可以连接到组
    ]
    //模型描述，将其映射到数据并创建节点和连接
    diagram.model=new go.GraphLinksModel(nodeDataArray,linkDataArray)

}

效果图：

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84076366e1a74ca082b0725200dc36f5~tplv-k3u1fbpfcp-watermark.image?)