如何在 JointJs 中以编程方式创建到端口的链接答案

【问题标题】：How to create links programmatically in JointJs to ports如何在 JointJs 中以编程方式创建到端口的链接
【发布时间】：2014-06-17 19:19:02
【问题描述】：

我正在尝试在 JointJs 中以编程方式创建链接到具有端口的 devs.Model 对象。

我尝试使用 api (http://jointjs.com/api#joint.dia.Graph:addCell) 中的 addCell 进行图形，但由于某种原因，创建的链接没有指向源和目标 devs.Model 对象上的正确端口圆，而是整个元素本身。

这是我尝试使用的代码：

var link = new joint.dia.Link({
      source: {
        id: srcModel.id,
        port: 'out'
      },
      target: {
        id: dstModel.id,
        port: 'in'
      }
    });
// Assume graph has the srcModel and dstModel with in and out ports.
graph.addCell(link)

链接已创建，但未指向任何端口，因此我觉得只需稍作调整即可使这些链接正常工作。

【问题讨论】：

这看起来是正确的。您能否提供完整的示例，包括您的 devs.Model。您的 srcModel/dstModel 中是否有一个名为“in”和“out”的端口？
请忽略。事实证明，有一些错误需要解决，这是有效的。谢谢，@dave。

标签： javascript jointjs

【解决方案1】：

只需将joint.dia.Link更改为joint.shapes.devs.Link：

  var link = new joint.shapes.devs.Link({
     source: {
       id: srcModel.id,
       port: 'out'
     },
     target: {
       id: dstModel.id,
       port: 'in'
     }
   });
  // Assume graph has the srcModel and dstModel with in and out ports.
  graph.addCell(link)

【讨论】：

【解决方案2】：

添加连接器和路由器。示例：

var link = new joint.shapes.devs.Link({
   source: {
     id: srcModel.id,
     port: 'out'
   },
   target: {
     id: dstModel.id,
     port: 'in'
   },
  connector: { name: 'rounded' },
  router: { name: 'metro' }
});
graph.addCell(link);

【讨论】：