Question

今晚，我尝试在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
});

注意在控制台中发出错误：

＆＃34;未捕获的TypeError：无法设置属性＆＃39; rank＆＃39;未定义＆＃34; - 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进行更复杂的解决：

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

Answer 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);

嵌入单元格时如何使用JointJS Directed Graph？

2 个答案: