首页 > 解决方案 > 如何在 Go.js 节点上设置键值以创建链接

问题描述

我正在使用 Go.js 创建用户可以在其上绘制直线的画布。从文档中,我已经能够创建节点。节点创建代码如下所示:

const node = this.goMake(go.Node, 'Horizontal',
    { position: new go.Point(point[0], point[1]) },  // set the Node.position
        this.goMake(go.Shape, 'Circle', { width: 10, height: 10, fill: 'lightblue' })
);

据我了解文档,为了在两个节点之间创建一条线(非定向链接),我需要key像这样使用它们的值:

this.myDiagram.model.addLinkData({ from: node1.key, to: node2.key });

注销我的节点时,我看到该key值是一​​个空字符串。

问题:使用上面的第一个片段创建节点时,如何注入键值以便第二个代码片段正确链接两者?为所有点创建唯一值不是问题,我只是不知道如何将唯一值附加到节点的key属性。

标签: javascriptgojs

解决方案


键是模型数据的属性,其中模型具有节点数据和链接数据的数组。键并不是节点本身的属性。node.key只是为了方便node.data.key

所以当你写:

myDiagram.model.addNodeData( { key: 'a' });

它正在制作 myDiagram.nodeTemplate 的副本,并为该节点分配node.dataof { key: 'a' },因此该节点的key'a'

换句话说,您只能通过模型​​关联这些东西,而不是您正在创建的节点。

如果您使用模型,您应该在图表上创建节点模板,而不是独立节点,就像您正在做的那样。所以像:

myDiagram.nodeTemplate = this.goMake(go.Node, 'Horizontal',
    { position: new go.Point(point[0], point[1]) },  // set the Node.position
        this.goMake(go.Shape, 'Circle', { width: 10, height: 10, fill: 'lightblue' })
);

或者如果您有多个模板:

myDiagram.nodeTemplateMap.add('newTemplate', this.goMake(go.Node, 'Horizontal',
    { position: new go.Point(point[0], point[1]) },  // set the Node.position
        this.goMake(go.Shape, 'Circle', { width: 10, height: 10, fill: 'lightblue' })
));

推荐阅读