4

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

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

“未捕获的类型错误：无法设置未定义的属性 'rank'”-dar.core.js 3085

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

4

2 回答 2

0

这是 Dagre-D3 的一个已知问题：自动布局不适用于带有 parent 链接的层次图。

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

  1. 分别布局每组子元素。
  2. 为每个父级创建一个辅助克隆父级。
  3. 将相应的元素设置为其克隆的父元素。
  4. 使每个克隆的父级适应其子级的大小，并根据克隆父级的大小调整原始父级的大小。
  5. 布置图表。
  6. 将克隆的父母翻译到其原始父母的位置（孩子将相应地翻译）。
  7. 删除克隆的父母并将孩子设置为原始父母。
于 2018-06-29T07:13:09.270 回答
0

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

    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);
于 2019-10-02T11:49:25.337 回答