连线相连 | GoJS

This demonstrates the ability for a Link to appear to connect with another Link. Regular links are blue. Link-connecting links are green. Try moving a node around to see how the links adapt. Initially the "Alpha" node connects with the link between Gamma and Delta. There is also a link between the two horizontal links.

This effect is achieved by using "label nodes" that belong to links. Such "label nodes" are real Nodes that are referenced from their owning Link. This sample customizes the "Link Label" Node template to allow the user to draw new links to/from such label nodes.

Newly drawn links automatically get a label node by the LinkingTool because this sample initializes the LinkingTool.archetypeLabelNodeData property of the ToolManager.linkingTool. The category (i.e. template) of each link is determined by what kinds of nodes the link is connected with.

Diagram.model saved in JSON format:

{ "class": "go.GraphLinksModel",
        "linkLabelKeysProperty": "labelKeys",
        "nodeDataArray": [
        {"key":"Alpha", "color":"lightblue", "loc":"29 14"},
        {"key":"Beta", "color":"orange", "loc":"129 14"},
        {"key":"Gamma", "color":"lightgreen", "loc":"29 106"},
        {"key":"Delta", "color":"pink", "loc":"129 106"},
        {"key":"A-B", "category":"LinkLabel" },
        {"key":"G-D", "category":"LinkLabel" },
        {"key":"A-G", "category":"LinkLabel" },
        {"key":"A-G-D", "category":"LinkLabel" },
        {"key":"A-B-G-D", "category":"LinkLabel" }
        ],
        "linkDataArray": [
        {"from":"Alpha", "to":"Beta", "labelKeys":[ "A-B" ]},
        {"from":"Gamma", "to":"Delta", "labelKeys":[ "G-D" ]},
        {"from":"Alpha", "to":"Gamma", "labelKeys":[ "A-G" ]},
        {"from":"Alpha", "to":"G-D", "labelKeys":[ "A-G-D" ], "category":"linkToLink"},
        {"from":"A-B", "to":"G-D", "labelKeys":[ "A-B-G-D" ], "category":"linkToLink"}
        ]}

加入 GoJS 交流群