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

Question

我正在尝试在 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)

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

Answer 1

Just Change joint.dia.Link for 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)

Answer 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);