如何在JointJs中以編程方式創建鏈接到端口

Question

我試圖在JointJs中以編程方式創建鏈接到具有端口的devs.Model對象。

我試圖從api（ http://jointjs.com/api#joint.dia.Graph:addCell ）使用addCell for graph，但由於某種原因，創建的鏈接沒有指向正確的端口圈源和目標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.shapes.devs.Link的joint.dia.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);