在添加新节点时防止节点重叠答案

【问题标题】：prevent node overlap on add new node在添加新节点时防止节点重叠
【发布时间】：2016-09-12 23:16:26
【问题描述】：

如何防止在 cytoscape js 图中重叠新添加的节点？我不想改变现有节点的位置我希望新添加的节点自动按此规则定位，以防止现有节点重叠

当我使用添加 API 将节点添加到图形时，添加的节点与其他节点重叠我该如何改变这种行为？是否有防止添加模式下节点重叠的解决方案（新节点不与现有节点重叠）？

cy.add([
  {  data: {label:"aaa" ,id:"bbb" } },
  { data: {label:"aaa333"  ,id:"rrrr"} },
]);

【问题讨论】：

标签： cytoscape.js

【解决方案1】：

没有内置解决方案。我只是使用此代码寻找一个空白点来测试重叠（这是给定一个固定的节点大小，您可以调整它以使用边界框，但这会减慢速度）。

  function overlap(pos, size) {
  var overlap = false;
  cy.nodes(':visible').forEach(function (node) {
    var npos = node.position();
    if ((pos.x - size) < npos.x && (pos.x + size) > npos.x && (pos.y - size) < npos.y && (pos.y + size) > npos.y) {
      overlap = true;
      return false; //break
     }
  });
  return overlap;
}

我将其与首选位置一起用作第一个参数 ({x:..,y:..})，当失败时，我只需将 10 添加到 y 以查看它是否合适。这是否是最适合您的解决方案取决于具体问题。

【讨论】：

【解决方案2】：

如果您想要一种自动化的方式来执行此操作，最好的选择是力导向/物理布局。

在运行布局时锁定除新节点之外的所有节点。

您必须尝试不同的布局，看看哪一个最适合您的应用/数据。

【讨论】：