GoJs中的增删改查

沅芷湘兰
817 阅读5分钟

前言

说完了图形的绘制和节点、连线、图标等的交互事件。已经成功的完成了可视化图形的绘制，并且可以根据用户的点击和其他事件的监听在不同的钩子函数中处理一些事情，使图形更加丰富。本文则说一下可视化图形的拓展，说一下gojs中的增删改查。

准备工作

//data
nodes:[{ key: "1", color: "#99FFFF",text:"三国",figure:"Rectangle" }],
links:[]

//methods
this.myDiagram = $$(go.Diagram, "myDiagramDiv", {
    layout: $$(go.TreeLayout),
});
this.myDiagram.nodeTemplate =
$$(go.Node, "Vertical",
$$(go.Shape, "Circle",
    { width: 30, height: 30 },
    new go.Binding("fill", "color"),
    new go.Binding("figure", "figure"),
 ),
$$(go.TextBlock, { margin: 5 },
    new go.Binding("text", "text"))
);
this.myDiagram.model = new go.GraphLinksModel(this.nodes, this.links);

gojs中的新增操作

新增节点的方法是Diagram.model.addNodeData(nodeData)，其中连线的新增方法是Diagram.model.addLinkData(linkData)，因此我们增加一个新增节点的按钮和新增连线的按钮，对数据一个简单的处理。代码如下

//html
<button @click="addNode">增加节点</button>
<button @click="addLink">增加连线</button>

//methods
addNode(){
    let nodeDataArr = [
        { key: "1-1", color: "#FF0000",text:"魏",figure:"Circle" },
        { key: "1-2", color: "#FFFF66",text:"蜀",figure:"Circle"},
        { key: "1-3", color: "#0000FF",text:"吴",figure:"Circle" }
    ]
    let nodeData = nodeDataArr[this.nodeIdx]
    this.myDiagram.model.addNodeData(nodeData)
    this.nodeIdx++
},
addLink(){
    let linkDataArr = [
        {from:"1",to:"1-1"},
        {from:"1",to:"1-2"},
        {from:"1",to:"1-3"}
    ]
    let linkData = linkDataArr[this.linkIdx]
    this.myDiagram.model.addLinkData(linkData)
    this.linkIdx++
}

动画.gif 由上图可以看出，分别对三个节点和三个连线进行了新增，并且可以在新增连线之后自动寻找到相对应的key值节点，并且在连线成功之后，依然会按照已经设置好的布局进行节点位置的重新渲染。在真实需求过程中，可以根据需求的规律对key进行组合或者生成id的方式进行新增，拓展已有的图形。

gojs中的删除操作

在新增节点过程中难免会出现错误的节点，或者是已经用过不再需要的节点，可以根据方法进行删除。节点的删除方法是Diagram.model.removeNodeData(nodeData)。连线的删除方法是Diagram.model.removeLinkData(linkData)。其使用方法和新增方法一样，这里就不再举例说明了。

节点和连线的批量删除的方法，如果需要删除的节点和连线比较多，也可以调用批量的删除方法。批量节点的删除方法为Diagram.model.removeNodeDataCollection(nodeDatas)，参数nodeDatas为节点nodeData的数组集合。批量连线的删除方法为Diagram.model.removeLinkDataCollection(linksDatas)，参数linksDatas为连线linkData的数组集合。

gojs中的修改操作

节点和连线的修改方法都是Diagram.model.setDataProperty()，其中修改方法有三个参数，第一个参数为需要修改的节点数据nodeData或者连线数据linkData。第二个参数为需要修改的属性，第三个参数则是修改之后的属性值。其使用示例如下

//修改节点信息
this.myDiagram.model.setDataProperty(nodeData,'text',"新的text值")

//修改连线信息
this.myDiagram.model.setDataProperty(linkData,'from',"1-1-1")

gojs的查询操作

以上方法是对画布中的节点进行的增、删、改操作。这一切操作的前提，是查询到选择或者需要操作的节点和连线数据，因为查询的方法比较多。分为三部分

获取全部的数据

Diagram.model.toJson()获取当前画布中的全部数据,并且以JSON格式的形式展示.

image.png

Diagram.nodes可以获取到所有的node数据

let nodes=myDiagram.nodes;
nodes.each(function (node) {
    console.log(node.data);
});

获取到所有的node数据之后，通过each方法可以遍历获取到的节点信息(node.data)

获取节点的数据(非树形)

通过key值来精准的获取到node信息

let node=myDiagram.findNodeForKey('key');

通过key值来精准的获取到node数据

let nodeData=myDiagram.model.findNodeDataForKey('key');

这里一定要区分一下，node是节点的对象信息，nodeData才是接地那的数据，也就是nodes中对象的键值对。

image.png

获取连线的数据(非树形)

通过from和to获取连线数据

let links = this.myDiagram.findLinksByExample({from:1, to:1-1});
links.iterator.each(function (link) {
    console.log(link.data);
});

获取到的link数据也是iterator.each方法来遍历获取节点数据(link.data)。

查询到和节点有关联的连线方法

let node = this.myDiagram.findNodeForKey('1-1');
node.findLinksConnected().each(function(link) {
    console.log(link.data)
});

查询到进入目标节点的连线方法(即数据中to属性为目标节点key值的)

let node=myDiagram.findNodeForKey('1-1');
node.findLinksInto().each(function(link) {
    console.log(link.data)
});

查询到从目标节点出来的连线方法(即数据中from属性为目标节点key值的)

let node=myDiagram.findNodeForKey('1-1');
node.findLinksOutOf().each(function(link) {
    console.log(link.data)
});

获取两个节点之间的的连线方法

let node1 = myDiagram.findNodeForKey('1')
let node2 = myDiagram.findNodeForKey('1-1')
node1.findLinksTo(node2).each(function(link) {
    console.log(link.data)
});

获取数据(树形)

因为树形节点的特殊性，因此在获取树形图形的节点和连线的数据的时候，也有一些特殊的方法。属性节点的出发节点和进入节点是存在父子关系关系的。

查询目标节点的的父节点方法

let parentNode=node.findTreeParentNode();

正常情况下，目标节点的父节点为一个节点，如果特殊情况存在多个父级节点的情况下，也可以通过each方法进行遍历获取数据。

查询目标节点的儿子节点的方法

let node = this.myDiagram.findNodeForKey('1-1');
node.findTreeChildrenNodes().each(function(NodeOrLink) {
    console.log(NodeOrLink.data)
});

因为节点的儿子节点可能不唯一，因此可以使用each方法来遍历获取到数据，在获取的所有数据中包括儿子节点和儿子节点之间的连线数据，因此在处理的时候需要做一下区分。

查询目标节点的所有父级节点到根节点为止

let node = this.myDiagram.findNodeForKey('1-1');
node.findTreeParentChain().each(function(NodeOrLink) {
    console.log(NodeOrLink.data)
});

findTreeParentChain方法是获取到父级节点以及父级的父级节点。一直向上找，直到找到根节点为止。

查询目标节点的儿子节点和所有的后代节点

let node = this.myDiagram.findNodeForKey('1-1');
node.findTreeParts().each(function(NodeOrLink) {
    console.log(NodeOrLink.data)
});

findTreeParts查询目标节点的子节点和所有后代节点，并且包括和这些节点之间的连线。也是通过each方法进行遍历来获取对应的数据。

总结

通过交互事件可以在一些用户行为下触发回调函数，而在这些回调函数中处理的一些事务。而这些事务就包括获取到查询的节点，然后进行增删改操作，来丰富画布的展示和后续拓展。

avatar
文章
阅读
粉丝