查看演示

1.需要引入的文件

[HTML] 纯文本查看 复制代码

<script src="js/go.js"></script>

2.html页面中参数修改

①修改左侧模块

在index页面中搜索myPalette

[JavaScript] 纯文本查看 复制代码

myPalette =
      $(go.Palette, "myPaletteDiv", 
        {
          "animationManager.duration": 800, 
          nodeTemplateMap: myDiagram.nodeTemplateMap,  
          model: new go.GraphLinksModel([  
            //category为方块的样式，text为方块内的文字，如需添加或删除方块，只要增加或删除此数组内的对象即可
            { category: "Start", text: "Start" },
            { text: "Step" },
            { text: "main", figure: "Diamond" },
            { category: "End", text: "End" },
            { category: "Comment", text: "Comment" }
          ])
        });

②修改右侧初始化出现的内容

在index页面中搜索load这个函数

[JavaScript] 纯文本查看 复制代码

 function load() {
    myDiagram.model = go.Model.fromJson({ "class": "go.GraphLinksModel",
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
  //nodeDataArray数组内的一个对象代表一个方块，三个参数都是必须的，第一个key代表每个方块的id；第二个loc代表方块的x，与y轴坐标；第三个text代表方块内的文字
{"key":1, "loc":"100 170", "text":"源端"},
{"key":2, "loc":"200 100", "text":"table1"},
{"key":3, "loc":"200 170", "text":"table2"},
{"key":4, "loc":"200 230", "text":"table3"}
],
  "linkDataArray": [
  //linkDataArray数组每个对象代表的是一个方块与另外一个方块的连接，第一个参数from表示从哪个方块开始，里面的数字是nodeDataArray对象里对应的key值；第二个参数to代表的是连接到哪个方块；第三个参数fromPort代表的是开始方块从哪个方向开始，有四个值（T,B,L,R）代表上下左右；第四个参数toPort是结束方块的连接方向，有四个值（T,B,L,R）代表上下左右;
{"from":1, "to":2, "fromPort":"R", "toPort":"L"},
{"from":1, "to":3, "fromPort":"T", "toPort":"L"},
{"from":1, "to":4, "fromPort":"R", "toPort":"L"}
 ]});
  }

点击查看更多精彩前端资源

点击有惊喜

水一波,既然还要9个字

还是老哥良心，你隔壁那个胖子附件居然要10个黑马币

jinglan 发表于 2018-2-1 19:52
还是老哥良心，你隔壁那个胖子附件居然要10个黑马币

那是那是