Question

我们使用一些specific layouts来可视化istio的服务网格，然后我们“复合节点”将同一服务（但版本不同）的节点分组。

这里的问题是，有时一个或所有布局会绘制一个较大的复合节点，看起来正在对超出所需数量的节点进行分组。

看下一个屏幕截图，看起来“评论”复合节点有很多节点，事实是评论框只有左上方的“ v2”和“ v1”以及右下方的“ v3”

我正在考虑一种解决方法，方法是：

删除复合节点的内容（为其留出足够的空间供以后使用）
布置其余节点
手动填充复合节点（例如，使用手动垂直布局）

我想知道是否有一种更简单的方法，如果不是，我正在考虑将此想法包装在一个布局上，该布局在创建时会收到“真实布局”。

const coseLayout = cy.layout({name: 'cose', ...});
const compoundNodeFixer = cy.layout({name: 'compoundnodefixer', real_layout: coseLayout});
compoundNodeFixer.run();

Answer 1

如果您需要使用特定的布局，很难做到这一点，因为您可能已经在StackOverflow上看到了十几个关于节点/标签重叠的其他未解决的问题。

但是仍然有cytoscape-cola.js布局，它提供了所需的间距，并具有将其他节点推开的酷效果。如果您可以使用它，那么它可能就是您的正确选择：

var cy;

var elements = [{
    data: {
      id: 'M',
      parent: 'B'
    }
  },
  {
    data: {
      id: 'B'
    }
  },
  {
    data: {
      id: 'H',
      parent: 'B'
    }
  },
  {
    data: {
      id: 'F'
    }
  },
  {
    data: {
      id: 'H2'
    }
  },
  {
    data: {
      id: 'T'
    }
  },
  {
    data: {
      id: 'A'
    }
  },
  {
    data: {
      id: 'e2',
      source: 'M',
      target: 'H'
    }
  },
  {
    data: {
      id: 'e3',
      source: 'M',
      target: 'F'
    }
  },
  {
    data: {
      id: 'e4',
      source: 'F',
      target: 'T'
    }
  }
]

$(function() { // on dom ready

  cy = cytoscape({
    container: $('#cy'),
    elements: elements,
    layout: {

      name: 'cola',
      infinite: true,
      fit: false
    }
  });
});

#cy {
  position: absolute;
  left: 1em;
  top: 1em;
  bottom: 1em;
  right: 17em;
  border: 1px solid #ccc;
}

html {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
  <script src="https://unpkg.com/cytoscape@3.2.18/dist/cytoscape.js"></script>
  <script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-cola@2.2.3/cytoscape-cola.min.js"></script>

</head>

<body>
  <div id="cy"></div>
</body>

</html>

不幸的是，它不是核心布局，而是扩展布局，使用它们时，您可能会体验到增强，也可能不会体验。

避免重叠的复合节点

1 个答案: