JointJS + ElkJS带端口元素间最小距离配置方法咨询

一、用ElkJS配置强制元素间最小距离 #

ElkJS的布局参数直接支持设置元素和端口的间距，刚好能解决标签挤在一起的问题：

• 设置spacing.nodeNode定义元素之间的最小距离，数值按需调整，得足够放下端口标签和连线标签的宽度；
• 加上spacing.portPort调整同一元素上端口之间的间距，避免端口本身挤成一团。

示例代码：

const elkLayoutOptions = {
  'elk.algorithm': 'layered',
  'elk.spacing.nodeNode': 80, // 元素间最小距离，根据标签大小调整
  'elk.spacing.portPort': 20, // 端口间的间距
  'elk.layered.spacing.nodeNodeBetweenLayers': 100, // 跨层元素的间距
};
// 应用布局时传入这个配置
graph.layout({
  type: 'elk',
  options: elkLayoutOptions
});

二、固定连接线长度的两种方法 #

方法1：通过ElkJS配置间接固定 #

用正交路由配合间距参数，让连线长度更可控：

const elkLayoutOptions = {
  'elk.algorithm': 'layered',
  'elk.edgeRouting': 'ORTHOGONAL', // 用正交路由，连线为直角转弯样式
  'elk.spacing.edgeNode': 30, // 连线到元素的距离
  'elk.layered.edgeSpacingFactor': 1.5, // 增大系数让连线整体变长
};

方法2：JointJS布局后手动调整 #

如果Elk的配置达不到预期，就在布局完成后手动修改连线的顶点，强行拉长：

// 监听布局完成事件
graph.on('layout:done', () => {
  graph.getLinks().forEach(link => {
    const vertices = link.get('vertices');
    // 针对只有一个中间顶点的正交连线
    if (vertices.length === 1) {
      // 拉长水平段，数值按需调整
      if (vertices[0].x > link.source().position().x) {
        vertices[0].x += 40;
      } else {
        vertices[0].x -= 40;
      }
      link.set('vertices', vertices);
    }
  });
});

三、额外优化标签显示 #

除了间距，还可以调整标签位置彻底避免遮挡：

• 端口标签：给端口的标签加偏移，比如port.attr('.label', { dx: 10, dy: 0 })，让标签远离端口；
• 连线标签：把标签移到连线上方或者旁边，比如link.attr('.label', { textAnchor: 'middle', dy: -15 })，避免和连线重叠。

内容的提问来源于stack exchange，提问作者Sks