- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个带有自定义模型的 goJS 图。当将一个节点放到另一个节点上时,我会在 mouseDrop 触发时链接它们,并在图上的链接数据中设置 from 和 to 。模型:
mydiagram.model.addLinkData({ from: oldNodeModel.key, to: dragNodeModel.key });
这一切都运行良好。在我的节点模板中,我有一个自定义模板,它在节点周围放置一个带有删除按钮的面板。这个删除按钮只是一个带有点击事件的图像。
现在,当我单击删除图像/按钮时,我想立即删除它及其所有子节点。
我的问题是我找不到 children 。
我有像 findNodesOutOf
这样的用户事件,它不会产生任何结果,而 findNodesConnected
会查找父节点和子节点并删除大量节点 - 这不是我想要的。
知道如何解决这个问题吗?
最佳答案
您可以使用diagram.selection获取要删除的项目:
var nodeToDelete = mydiagram.selection.iterator.first();
接下来要查找该节点的所有子节点,我建议使用递归函数,该函数将执行以下操作:
然后您可以删除它们。
您的代码将如下所示:
function deleteNode()
{
// TAKE NOTE - This will get all selections so you need to handel this
// If you have multiple select enabled
var nodeToDelete = mydiagram.selection.iterator.first();
var childNodes = getChildNodes(deletedItem);
//Remove linked children
$.each(childNodes, function()
{
myDiagram.remove(this);
});
// Then also delete the actual node after the children was deleted
// TAKE NOTE - This will delete all selections so you need to handle this
// If you have multiple select enabled
mydiagram.commandHandler.deleteSelection();
}
递归函数不断检查每个节点的子节点并将它们添加到数组中:
function getChildNodes(deleteNode)
{
var children = [];
var allConnected= deleteNode.findNodesConnected();
while (allConnected.next())
{
var child = allConnected.value;
// Check to see if this node is a child:
if (isChildNode(deleteNode, child))
{
// add the current child
children.push(child);
// Now call the recursive function again with the current child
// to get its sub children
var subChildren = getChildrenNodes(child);
// add all the children to the children array
$.each(subChildren, function()
{
children.push(this);
});
}
}
// return the children array
return children;
}
此函数将通过查看图中的链接并检查当前节点和子节点来检查该节点是否为子节点:
function isChildNode(currNode, currChild)
{
var links = myDiagram.links.iterator;
while (links.next())
{
// Here simply look at the link to determine the direction by checking the direction against the currNode and the child node. If from is the current node and to the child node
// then you know its a vhild
var currentLinkModel = links.value.data;
if (currentLinkModel.from === currNode.data.key && currentLinkModel.to === currChild.data.key)
{
return true;
}
}
return false;
}
关于javascript - GoJS在不知道父节点 key 的情况下删除子节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28511295/
是否可以在 GoJS 中显式地在拖动和链接模式之间切换?我正在尝试实现与其他图表编辑器类似的行为: 在图表外的工具栏中有 2 个按钮:一个链接和一个手。 点击链接按钮将图表切换到链接模式。单击任何节点
我正在使用 go.js 制作组织结构图。 我无法弄清楚的一件事是,如何过滤特定节点?是否可以在 go.js 中有一个用于搜索节点的 UI? 最佳答案 org chart static sample 中
刚接触GoJ,在学习过程中,发现GoJS与draw.io比较相似,但是缺少将图表添加到调色板的属性,而支持从调色板到图表。 即,将图表从工作区移动到工具栏,以便重复使用。 最佳答案 你绝对可以做到这一
我正在尝试设计一个节点模板,其中将有一个围绕节点的圆环图,如下例所示: 节点数据将为 5 个不同的属性提供 5 个值,并且每个值都由节点周围的不同颜色表示。 我看过 GoJs 饼图示例 https:/
我有一个包含图标的节点图: $(go.TextBlock, { font: '18pt Material Icons', alignment: go.Spot.LeftCenter, stroke
我想为用户创建自定义选择下拉列表来编辑节点和链接文本。 到目前为止,我使用此代码使用户可以在下拉列表中选择节点和链接文本: State Chart body {
我有一个启用了节点选择的 gojs 图。该区域指定为 $(go.Node, 'Spot', new go.Binding("location", "loc", go.Point.parse).make
我正在使用 goJS 制作一些图表。尝试提供更好的用户体验,以便当用户选择一个节点并按下键盘上的任何字母数字键、标点符号或空格键时,该节点会自动进入编辑模式。 之后,用户将写入一些文本,当按下 Ent
我有几个带有节点的组,我想让这些组在移动时不相交。为此我需要做什么?有一个我的小组模板的示例。 $(go.Group, "Auto", { layout: $(go.LayeredDigr
我有一个简单的 python Flask 应用程序,我将 JSON 数据发送到我的 HTML,并使用 goJS 显示我的图表,如下所示: 用户可以添加新的节点和链接,但我想要的是起始图表被锁定,以便用
我有一个简单的 python Flask 应用程序,我将 JSON 数据发送到我的 HTML,并使用 goJS 显示我的图表,如下所示: 我想为用户创建自定义选择下拉列表来编辑节点和链接文本。到目前为
我正在尝试解析 GoJS 图,用户可以从盘子、圆形节点、矩形节点、三 Angular 形中拖动不同的类别。他可以在一个方向上将它们互连,直到到达终点。 所需的功能是解析图形并根据用户依赖关系图给出可能
我有一个调色板和图表并排使用相同的模板。 var template = $(go.Node, "Horizontal", $(go.Shape, { width: 15, height
我正在尝试创建一个自定义 Leaflet 层,该层应启用 GoJS 的使用图书馆。我已经解决了大部分主要问题,例如: 根据图层转换重新定位图表 在图表视口(viewport)之外绘制元素 拖动 map
如何根据条件(特别是变量的值)显示 go.Shape? go$(go.Shape, "Rectangle", { height: diagram.width, strokeWidth: 0.5 },
我正在使用 Flowchart来自 http://gojs.net/latest/samples/flowchart.html它工作正常。唯一的问题是,它没有 t display the toolba
我想通过图形中的键动态更改节点的文本和默认属性。我没有在文档中找到任何选项。 谢谢。 最佳答案 我假设您使用的是模型。如果是这样,您应该确保您的节点模板对您要修改的属性使用数据绑定(bind)。 请阅
我有一个简单的 python flask goJS 图形应用程序,它看起来像这样: 节点和链接文本的来源是从应用程序的后端加载的,我将它们设置在 model.modelData 部分,如下所示: va
我想要一个在同一个图表中有垂直和水平布局的图表。我怎样才能在 gojs 中实现这一点? 最佳答案 您可以通过多种方式实现目标。我可以想到三个副手。按工作递减顺序: 创建一个自定义布局来满足您的需求。这
我使用下面的代码创建了一个按钮,当用户将鼠标悬停在图表节点上时会显示该按钮。但按钮看起来很正常,没有任何样式。 我想让这个按钮类似于引导主按钮。我们如何向此悬停按钮添加自定义 css JSFIDDLE
我是一名优秀的程序员,十分优秀!