如何在 Go.js 节点上设置键值以创建链接

Question

我正在使用 Go.js 创建一个 canvas 用户可以在上面画直线。从文档中，我已经能够创建节点。节点创建代码如下所示：

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' })
);

据我了解文档，为了在两个节点之间创建一条线（非定向 link），我需要像这样使用它们的 key 值：

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

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

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

Answer 1

键是模型数据的属性，其中模型有一个节点数据数组和link数据。键不完全是节点本身的属性。 node.key 只是为了方便 node.data.key。

所以当你写的时候：

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

它正在制作 myDiagram.nodeTemplate 的副本，并为该节点分配 { key: 'a' } 的 node.data，因此该节点的 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' })
));

如何在 Go.js 节点上设置键值以创建链接

How to set the key value on a Go.js Node to create links

javascript

gojs