以下代码假定您不想在模型中存储虚拟节点。隐藏节点不可见，并且虚拟节点通过虚拟链接与与现在隐藏节点连接的相同未选择节点连接。
<!DOCTYPE html>
<html>
<head>
<title>Simple Coalescing of Nodes without using Collapsed Groups</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.ForceDirectedLayout,
{ maxIterations: 500, isRealtime: false }),
"InitialLayoutCompleted": function(e) {
e.diagram.nodes.each(function(g) {
if (g instanceof go.Group) g.layout = null;
});
},
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 80, height: 50 },
$(go.Shape,
{ fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
new go.Binding("fill", "color")),
$(go.TextBlock, { textAlign: "center" },
new go.Binding("text"))
);
myDiagram.linkTemplate =
$(go.Link,
{ relinkableFrom: true, relinkableTo: true },
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.groupTemplate =
$(go.Group, "Auto",
{ layout: $(go.CircularLayout) },
$(go.Shape, { fill: "#8882" }),
$(go.Placeholder, { padding: 8 }),
$(go.TextBlock, { font: "bold 12pt sans-serif" },
new go.Binding("text", "key"))
)
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Concept Maps" },
{ key: 2, text: "Organized Knowledge" },
{ key: 3, text: "Context Dependent" },
{ key: 4, text: "Concepts", group: "G1" },
{ key: 5, text: "Propositions", group: "G1" },
{ key: 6, text: "Associated Feelings or Affect", group: "G1" },
{ key: 7, text: "Perceived Regularities" },
{ key: 8, text: "Labeled" },
{ key: 9, text: "Hierarchically Structured" },
{ key: 10, text: "Effective Teaching", group: "G2" },
{ key: 11, text: "Crosslinks", group: "G2" },
{ key: 12, text: "Effective Learning" },
{ key: 13, text: "Events (Happenings)" },
{ key: 14, text: "Objects (Things)" },
{ key: 15, text: "Symbols", group: "G3" },
{ key: 16, text: "Words", group: "G3" },
{ key: 17, text: "Creativity", group: "G3" },
{ key: 18, text: "Interrelationships" },
{ key: 19, text: "Infants" },
{ key: 20, text: "Different Map Segments" },
{ key: "G1", isGroup: true },
{ key: "G2", isGroup: true },
{ key: "G3", isGroup: true }
],
[
{ from: 1, to: 2, text: "represent" },
{ from: 2, to: 3, text: "is" },
{ from: 2, to: 4, text: "is" },
{ from: 2, to: 5, text: "is" },
{ from: 2, to: 6, text: "includes" },
{ from: 2, to: 10, text: "necessary\nfor" },
{ from: 2, to: 12, text: "necessary\nfor" },
{ from: 4, to: 5, text: "combine\nto form" },
{ from: 4, to: 6, text: "include" },
{ from: 4, to: 7, text: "are" },
{ from: 4, to: 8, text: "are" },
{ from: 4, to: 9, text: "are" },
{ from: 5, to: 9, text: "are" },
{ from: 5, to: 11, text: "may be" },
{ from: 7, to: 13, text: "in" },
{ from: 7, to: 14, text: "in" },
{ from: 7, to: 19, text: "begin\nwith" },
{ from: 8, to: 15, text: "with" },
{ from: 8, to: 16, text: "with" },
{ from: 9, to: 17, text: "aids" },
{ from: 11, to: 18, text: "show" },
{ from: 12, to: 19, text: "begins\nwith" },
{ from: 17, to: 18, text: "needed\nto see" },
{ from: 18, to: 20, text: "between" }
]);
}
function test() {
if (myDiagram.selection.count === 0) return;
if (myDiagram.selection.count === 1 && myDiagram.selection.first().hidden !== null) {
// only expand a single coalesced node (dummy) at a time
myDiagram.commit(function(diag) {
var dummy = diag.selection.first();
diag.remove(dummy); // also removes connected links that are dummies
dummy.hidden.each(function(n) {
n.visible = true;
});
diag.selectCollection(dummy.hidden);
}, "expanded");
} else {
myDiagram.commit(function(diag) {
var $ = go.GraphObject.make;
var dummy = $(go.Node, "Auto",
{ locationSpot: go.Spot.Center },
$(go.Shape, "Circle", { fill: "yellow" }),
$(go.TextBlock, "hidden\nnodes", { textAlign: "center" })
);
dummy.hidden = new go.Set(); // keep track of the nodes that it represents
diag.selection.each(function(n) {
if (n instanceof go.Node) {
dummy.hidden.add(n);
n.visible = false;
new go.List(n.linksConnected).each(function(l) {
if (!l.fromNode.isSelected || !l.toNode.isSelected) {
var dum = $(go.Link,
$(go.Shape, { stroke: "brown" }),
$(go.Shape, { toArrow: "OpenTriangle", stroke: "brown" }));
if (!l.fromNode.isSelected) dum.fromNode = l.fromNode;
if (!l.toNode.isSelected) dum.toNode = l.toNode;
if (!dum.fromNode) dum.fromNode = dummy;
if (!dum.toNode) dum.toNode = dummy;
diag.add(dum);
}
});
}
});
dummy.location = diag.computePartsBounds(diag.selection).center;
diag.add(dummy);
diag.select(dummy);
}, "coalesced nodes");
}
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<button onclick="test()">Test</button> to hide selected nodes,
replaced by a temporary yellow node and temporary brown links that are not in the model
</body>
</html>