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

Question

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

我尝试使用 addCell for graph 来自 api ( http://jointjs.com/api#joint.dia.Graph: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

只需将 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)