嵌入单元格时如何使用 JointJS 有向图？答案

【问题标题】：How to use a JointJS Directed Graph when cells are embedded?嵌入单元格时如何使用 JointJS 有向图？
【发布时间】：2016-09-27 03:36:08
【问题描述】：

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

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

即使源代码链接没有正确映射，我还是在这里找到的：

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

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

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

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

“Uncaught TypeError: Cannot set property 'rank' of undefined”——dar.core.js 3085

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

【问题讨论】：

标签： javascript directed-graph jointjs dagre

【解决方案1】：

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

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

单独布置每组子元素。
为每个父代创建一个辅助克隆父代。
将相应的元素设置为其克隆的父元素。
使每个克隆的父级适应其子级的大小，并根据克隆的父级的大小调整原始父级的大小。
布局图表。
将克隆的父级翻译成其原始父级的位置（子级将相应翻译）。
删除克隆的父母，将孩子设置为原始父母。

【讨论】：

【解决方案2】：

不要使用嵌入。你可以创建一个自定义元素：

    const CustomCircle = joint.dia.Element.define(
        'CustomCircle',
        {
            attrs: {
                outer: {
                    refR: 0.5,
                    refCx: 0.5,
                    refCy: 0.5,
                },
                inner: {
                    refR: 0.3,
                    refCx: 0.5,
                    refCy: 0.5,
                },
                // outline: {
                //     refX: 0,
                //     refY: 0,
                //     refWidth: '100%',
                //     refHeight: '100%',
                //     strokeWidth: 1,
                //     stroke: '#000000',
                //     strokeDasharray: '5 5',
                //     strokeDashoffset: 2.5,
                //     fill: 'none'
                // }
            }
        },
        {
            markup: [
                {
                    tagName: 'circle',
                    selector: 'outer'
                },
                {
                    tagName: 'circle',
                    selector: 'inner'
                },
                // {
                //     tagName: 'rect',
                //     selector: 'outline'
                // }
            ]
        }
    );

    const circle = new CustomCircle();
    circle.attr({
        outer: {
            class: 'class1 class2',
        },
        inner: {
            class: 'class3 class4'
        },
    });
    circle.resize(40, 40);

【讨论】：