Question

我有一个包含许多元素和链接的JointJs模型。我希望大多数链接显示为元素之间的行，但对于某些类型的链接，我希望它们对用户来说是不可见的和不可发现的。我已经尝试了一些让我接近的不同的东西，但我想知道是否有人有更好或更完整的解决方案。

我尝试的事情：

link.attr({'.connection': {opacity: 0.0}});

这确实使链接对用户不可见，但仍然显示并且当用户的鼠标移过它时可以编辑。

link.attr({'.connection': {display: non}});

这甚至不会将链接放在调色板上，该调色板确实成功地将其隐藏在用户之外，但是由于模型不再跟踪它而存在问题。

对于更多背景信息，这些链接可以存在但用户无法创建或使用，因此我不希望将它们呈现给用户。但是，当我查询所有链接的调色板时，我仍然希望它们存在。

感谢您提供的任何帮助或想法。

Answer 1

您可以使用

<div class="wrap">
  <div class="narrow">
    <div class="item1">
      Longest sentence.
    </div>
    <div class="item2">
      Short text.
    </div>
    <div class="item3">
      Another text.
    </div>
    <div class="item1">
      Longest sentence.
    </div>
    <div class="item2">
      Short text.
    </div>
    <div class="item3">
      Another text.
    </div>
  </div>
</div>

（另见Hiding elements in a diagram）

Answer 2

我所拥有的最佳解决方案是隐藏链接的所有元素（在doc中，他们解释了这些元素）。

我做了这个功能：

var attrObject = {
    '.connection': {display:"none"}, //the link
    '.marker-target': {display:"none"}, 
    'text': {display:"none"}, //because I have a label
    'rect': {display:"none"}, //second element of label
    '.connection-wrap': {display:"none"},//a bigger link highliting on hover
    'g.marker-vertices': {display:"none"}, //vertice of the link
    'g.link-tools': {display: 'none'}, // the button to delete the link
    'g.marker-arrowheads': {display:"none"} //the arrow to change link targets
};
link.attr(attrObject);

在JointJs中隐藏链接

2 个答案: