在隐藏节点上进行 Link 继续
Make a Link continue over a hidden node
我有一个显示层次结构流程的 go.js 图表。
它更像是 chartEditor 示例中的那个，但我想要做的是隐藏一些节点。例如，在此图表中，我想隐藏 id:6 的节点，以便我将每个图表元素保留在它们的位置，但删除 id:6 的节点。
我已经找到如何隐藏此 "How to hide nodes?" link 之后的节点，但发生的情况是，在我隐藏该节点后，我留下了损坏的 link。有没有办法解决这个问题？理想情况下，我希望 link 继续隐藏节点。
我在代码中所做的正是它在 go.js 论坛答案中所说的。我添加了一个 "visible", 属性 到 nodeDataArray，并添加了以下绑定到节点的 go.Shape object
new go.Binding("visible", "visible", function(t) { return t ? true : false; })
我认为最简单的方法是显示一条具有适当描边颜色和宽度的垂直线来代替普通元素。
因此，在组织结构图编辑器示例的节点模板中，替换：
// define the node's outer shape
$(go.Shape, "Rectangle",
{
name: "SHAPE", fill: "white", stroke: null,
// set the port properties:
portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
}),
和：
// define the node's outer shape
$(go.Panel,
// this is the vertical line that the user will see when the SHAPE is transparent:
$(go.Shape, "LineV", { strokeWidth: 4, stroke: "#00a4a4",
alignment: go.Spot.Center, stretch: go.GraphObject.Fill }),
$(go.Shape, "Rectangle",
{
name: "SHAPE", fill: "white", stroke: null, stretch: go.GraphObject.Fill,
// set the port properties:
portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
})
),
并将 name: "PANEL" 添加到包含所有信息的 "Horizontal" 面板：
$(go.Panel, "Horizontal",
{ name: "PANEL" },
$(go.Picture,
. . .
然后在用户想要使选定节点不可见时调用此函数或类似函数：
function toggle() {
var node = myDiagram.selection.first();
if (node instanceof go.Node) {
myDiagram.startTransaction();
if (node.isTreeLeaf) {
node.opacity = (node.opacity > 0.5) ? 0.0 : 1.0;
} else {
var shape = node.findObject("SHAPE");
if (shape !== null) shape.opacity = (shape.opacity > 0.5) ? 0.0 : 1.0;
var panel = node.findObject("PANEL");
if (panel !== null) panel.opacity = (panel.opacity > 0.5) ? 0.0 : 1.0;
}
myDiagram.commitTransaction("toggled opacity of node elements");
}
}
注意叶节点如何使整个节点半透明，而不是显示一条垂直线。
结果是：
顺便说一下，您可以通过在 GoJS 论坛中发帖更快地获得答案：
https://forum.nwoods.com/c/gojs
我有一个显示层次结构流程的 go.js 图表。 它更像是 chartEditor 示例中的那个，但我想要做的是隐藏一些节点。例如，在此图表中，我想隐藏 id:6 的节点，以便我将每个图表元素保留在它们的位置，但删除 id:6 的节点。
我已经找到如何隐藏此 "How to hide nodes?" link 之后的节点，但发生的情况是，在我隐藏该节点后，我留下了损坏的 link。有没有办法解决这个问题？理想情况下，我希望 link 继续隐藏节点。
我在代码中所做的正是它在 go.js 论坛答案中所说的。我添加了一个 "visible", 属性 到 nodeDataArray，并添加了以下绑定到节点的 go.Shape object
new go.Binding("visible", "visible", function(t) { return t ? true : false; })
我认为最简单的方法是显示一条具有适当描边颜色和宽度的垂直线来代替普通元素。
因此，在组织结构图编辑器示例的节点模板中，替换：
// define the node's outer shape
$(go.Shape, "Rectangle",
{
name: "SHAPE", fill: "white", stroke: null,
// set the port properties:
portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
}),
和：
// define the node's outer shape
$(go.Panel,
// this is the vertical line that the user will see when the SHAPE is transparent:
$(go.Shape, "LineV", { strokeWidth: 4, stroke: "#00a4a4",
alignment: go.Spot.Center, stretch: go.GraphObject.Fill }),
$(go.Shape, "Rectangle",
{
name: "SHAPE", fill: "white", stroke: null, stretch: go.GraphObject.Fill,
// set the port properties:
portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
})
),
并将 name: "PANEL" 添加到包含所有信息的 "Horizontal" 面板：
$(go.Panel, "Horizontal",
{ name: "PANEL" },
$(go.Picture,
. . .
然后在用户想要使选定节点不可见时调用此函数或类似函数：
function toggle() {
var node = myDiagram.selection.first();
if (node instanceof go.Node) {
myDiagram.startTransaction();
if (node.isTreeLeaf) {
node.opacity = (node.opacity > 0.5) ? 0.0 : 1.0;
} else {
var shape = node.findObject("SHAPE");
if (shape !== null) shape.opacity = (shape.opacity > 0.5) ? 0.0 : 1.0;
var panel = node.findObject("PANEL");
if (panel !== null) panel.opacity = (panel.opacity > 0.5) ? 0.0 : 1.0;
}
myDiagram.commitTransaction("toggled opacity of node elements");
}
}
注意叶节点如何使整个节点半透明，而不是显示一条垂直线。
结果是：
顺便说一下，您可以通过在 GoJS 论坛中发帖更快地获得答案： https://forum.nwoods.com/c/gojs