使链接在隐藏节点上继续

时间:2016-11-01 00:36:53

标签: javascript gojs

我有一个go.js图表​​,显示了一个层次结构流程。 它更像是chartEditor示例中的那个,但我想做的是隐藏一些节点。例如,在此图表中,我想隐藏id:6的节点,以便我将每个图表元素保持在其位置,但是删除了id为:6的节点。

enter image description here

我已经找到了如何隐藏这个"How to hide nodes?"链接后的节点,但是发生的事情是,在我隐藏节点后,我留下了一个断开的链接。有办法解决这个问题吗?理想情况下,我希望该链接继续隐藏节点。

enter image description here

我在代码中所做的是exacly在go.js论坛答案中所说的内容。我向nodeDataArray添加了一个“visible”属性,并将以下绑定添加到节点的go.Shape对象

new go.Binding("visible", "visible", function(t) { return t ? true : false; })

1 个答案:

答案 0 :(得分:1)

我认为最简单的方法是显示适当笔触颜色和宽度的垂直线代替普通元素。

因此,在组织结构图编辑器示例的节点模板中,替换: // 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"添加到包含所有信息的“水平”面板: $(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 Org Chart Editor with one node translucent

顺便说一句,您可以通过在GoJS论坛上发帖来获得更快的答案: https://forum.nwoods.com/c/gojs