JointJS将多个自定义连接器绘制到一个元素

var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  model: graph,
  width: 800,
  height: 600,
  gridSize: 10
});

var rect1 = new joint.shapes.standard.Rectangle({
  position: { x: 100, y: 100 },
  size: { width: 100, height: 50 },
  attrs: {
    body: {
      fill: 'lightblue',
      stroke: 'black'
    },
    label: {
      text: 'Element 1',
      fill: 'black'
    }
  }
});

var rect2 = new joint.shapes.standard.Rectangle({
  position: { x: 300, y: 100 },
  size: { width: 100, height: 50 },
  attrs: {
    body: {
      fill: 'lightblue',
      stroke: 'black'
    },
    label: {
      text: 'Element 2',
      fill: 'black'
    }
  }
});

graph.addCells([rect1, rect2]);

var connector1 = new joint.shapes.standard.Link({
  source: { id: rect1.id },
  target: { id: rect2.id },
  attrs: {
    line: {
      stroke: 'black',
      strokeWidth: 2
    }
  }
});

var connector2 = new joint.shapes.standard.Link({
  source: { id: rect1.id },
  target: { id: rect2.id },
  attrs: {
    line: {
      stroke: 'red',
      strokeWidth: 2
    }
  }
});

graph.addCells([connector1, connector2]);