javascript - 嵌入单元格时如何使用 JointJS 有向图？

Question

今晚，我尝试在 JointJS 网站的示例上执行有向图。请参阅离散事件示例:

http://resources.jointjs.com/demos/devs

虽然源代码链接没有正确映射，但我在这里找到了:

https://raw.githubusercontent.com/clientIO/joint/master/demo/devs/src/shapes.devs.js

我处于无法预测放置对象的位置的情况，就像在演示中一样。因此，我依靠有向图来完成这项工作。因此，作为一个简单的示例，我只是将以下内容放在代码的末尾，看看会发生什么:

joint.layout.DirectedGraph.layout(graph, {
    setLinkVertices: false
});

控制台中的通知发出错误:

“未捕获的类型错误:无法设置未定义的属性‘等级’”— dare.core.js 3085

这正是我在我的软件中遇到的问题。到目前为止我找到的唯一解决方案是删除所有嵌入的单元格。这是错误还是演示已过时？我搜索了文档但收效甚微。有人遇到过这个问题吗？任何人都可以获得演示以使用 DirectedGraph 吗？

Answer 1

这是 Dagre-D3 的一个已知问题:Automatic layout does not work on hierarchical diagrams with links with parent .

要使其正常工作，您可以在调用 joint.layout.DirectedGraph.layout() 时省略嵌入元素之间的链接，或者您可以按照建议的更复杂的解决方法 here :

1. 分别布局每组子元素。
2. 为每个 parent 创建一个辅助克隆 parent 。
3. 将相应的元素设置为其克隆的父元素。
4. 使每个克隆的父级适合其子级的大小，并使用克隆的父级的大小调整原始父级的大小。
5. 布局图表。
6. 将克隆的父级翻译到其原始父级的位置(子级将相应地翻译)。
7. 删除克隆的 parent 并将 child 设置为原始 parent 。