如何禁用对jointjs链接的“删除”操作？答案

【问题标题】：how to disable 'remove' action on links on jointjs?如何禁用对jointjs链接的“删除”操作？
【发布时间】：2014-01-17 13:09:06
【问题描述】：

使用jointjs库建图，文档很少的好库。

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

【问题讨论】：

标签： html graph jointjs

【解决方案1】：

这是我在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'
            }
        }
    })
});

【讨论】：

【解决方案2】：

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

<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" />

例如以下创建的链接只有一个结束标记和标签，没有工具或悬停轮廓：

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

【讨论】：

这应该是答案。

【解决方案3】：

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

所以：

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

应该这样做。

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

【讨论】：

【解决方案4】：

正如 Dave 所指出的，它是在 css 中完成的，但您需要为选项添加额外的内容。 CSS 的条目是：

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

【讨论】：

我仍然在悬停时显示箭头，有什么办法可以避免吗？谢谢！
希望.link .mark-errors { display: none; } 对我的回答有所帮助。

【解决方案5】：

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

【讨论】：