Question

使用jointjs库来构建图形，它是一个文档很少的好库。

http://jointjs.com/demos/fsa 如上页所示，当鼠标在链接上移动时，链接上有一个“删除”图标，可以单击该图标以删除链接，我想在链接上禁用“删除”操作？请指教。

Answer 1

最简单的方法是在CSS中设置.link-tools .tool-remove { display: none }。

Answer 2

您可以修改用于显示链接的标记。 The documentation列出了所有标记元素。只有＆＃34;连接＆＃34;是强制性的。

<path class="connection"/>
<path class="marker-source"/>
<path class="marker-target"/>
<path class="connection-wrap"/>
<g class="labels" />
<g class="marker-vertices"/>
<g class="marker-arrowheads"/>
<g class="link-tools" />

E.g。以下内容仅使用结束标记和标签，无工具或悬停轮廓创建链接：

var MyLink = joint.dia.Link.extend({
    markup: '<path class="connection"/><path class="marker-target"/><g class="labels" />'
});

Answer 3

这是我在jointjs版本1.0.2上修改css的这一部分的替代方法。

这个技巧的好处是我们可以拥有不同风格的不同链接，而且它也更灵活。

var link = new joint.dia.Link({
    // other attributes 
    attrs: {
    //other attributes
        '.link-tools': {
            display: 'none'
        }
    }
});

我们也可以在论文中将其设置为默认值，这是另一个例子：

var paper  = new joint.dia.Paper({
    // other configs..
    defaultLink: new joint.dia.Link({
        attrs: {
            //other attributes
            '.link-tools': {
                display: 'none'
            }
        }
    })
});

Answer 4

正如Dave所说，它是在css中完成的，但你需要为选项添加一个额外的。 CSS的条目是：

.link-tools .tool-remove { display: none }
.link-tools .tool-options { display: none }

Answer 5

我看到，对于箭头，有一个g元素，marker-arrowheads类。

所以：

.link .marker-arrowheads { display: none; }

应该这样做。

请注意，还有一个marker-vertices类的元素。

如何在jointjs上的链接上禁用“删除”操作？

5 个答案: