JointJS создает несколько связей между элементами

Question

Я пытаюсь создать диаграмму like this с использованием JointJS.

Однако, когда я добавляю несколько ссылок между элементами, я вижу только 1 ссылку. Как мне добавить несколько ссылок с автоматически настроенным пространством между ними?

Это код для добавления боксов и ссылок. Обратите внимание, что прямо сейчас я просто пытаюсь добавить 3 ссылки между всеми блоками, но я вижу только 1 ссылку между ними.

var steps = [{title: "Step 1"}, {title: "Step 2"}, {title: "Step 3"}]; 

steps.forEach(function(step, i){ 
    var title = step.title; 
    var yOffset = i*150 + 50; //offsets first block by 50 in y and all others 150 
    var xOffset = 60; //offsets all blocks by 60 
    createBlock(title, xOffset, yOffset, i); 
}); 

var blocks = []; 

function createBlock(title, x, y, loc) { 
    var x = (typeof x !== 'undefined') ? x : 0; 
    var y = (typeof y !== 'undefined') ? y : 0; 

    var newBlock = new joint.shapes.html.Element({ 
     position: { x: x, y: y }, 
     size: { width: 170, height: 100 }, 
     label: title, 
     attrs: { 
      '.label': { 
       text: title, 
       'ref-x': .5, 
       'ref-y': .4, 
       fill: '#FFFFFF' 
      }, 
     } 
    }); 

    blocks.push(newBlock.id); 

    graph.addCell(newBlock); 

    if(blocks.length > 1) { 
     var link = new joint.shapes.devs.Link({ 
      source: { 
       id: blocks[loc-1], 
      }, 
      target: { 
       id: blocks[loc], 
      }, 
     }); 
     graph.addCell(link); 

     var link2 = new joint.shapes.devs.Link({ 
      source: { 
       id: blocks[loc-1], 
      }, 
      target: { 
       id: blocks[loc], 
      }, 
     }); 
     graph.addCell(link2); 

     var link3 = new joint.shapes.devs.Link({ 
      source: { 
       id: blocks[loc-1], 
      }, 
      target: { 
       id: blocks[loc], 
      }, 
     }); 
     graph.addCell(link3); 
    } 
} 

Answer 1

все ссылки лежат друг над другом, поэтому вы видите его как один. В демо-суде есть код, чтобы видеть каждую ссылку в разных путях. вы можете добавить приведенный ниже код и посмотреть, что ссылки отображаются в разных путях. Вам нужно будет поменять график на графическое название в нижеуказанных трех строках.

// displaying multiple links between two elements in different paths 
     function adjustVertices(graph, cell) { 
      // If the cell is a view, find its model. 
      cell = cell.model || cell; 
      if (cell instanceof joint.dia.Element) { 
       _.chain(graph.getConnectedLinks(cell)).groupBy(function(link) { 
        // the key of the group is the model id of the link's source or target, but not our cell id. 
        return _.omit([link.get('source').id, link.get('target').id], cell.id)[0]; 
       }).each(function(group, key) { 
        // If the member of the group has both source and target model adjust vertices. 
        if (key !== 'undefined') adjustVertices(graph, _.first(group)); 
       }); 
       return; 
      } 

      // The cell is a link. Let's find its source and target models. 
      var srcId = cell.get('source').id || cell.previous('source').id; 
      var trgId = cell.get('target').id || cell.previous('target').id; 

      // If one of the ends is not a model, the link has no siblings. 
      if (!srcId || !trgId) return; 

      var siblings = _.filter(graph.getLinks(), function(sibling) { 

       var _srcId = sibling.get('source').id; 
       var _trgId = sibling.get('target').id; 

       return (_srcId === srcId && _trgId === trgId) || (_srcId === trgId && _trgId === srcId); 
      }); 

      switch (siblings.length) { 

      case 0: 
       // The link was removed and had no siblings. 
       break; 

      case 1: 
       // There is only one link between the source and target. No vertices needed. 
       cell.unset('vertices'); 
       break; 

      default: 

       // There is more than one siblings. We need to create vertices. 
       // First of all we'll find the middle point of the link. 
       var srcCenter = graph.getCell(srcId).getBBox().center(); 
       var trgCenter = graph.getCell(trgId).getBBox().center(); 
       var midPoint = joint.g.line(srcCenter, trgCenter).midpoint(); 

       // Then find the angle it forms. 
       var theta = srcCenter.theta(trgCenter); 

       // This is the maximum distance between links 
       var gap = 20; 

       _.each(siblings, function(sibling, index) { 
        // We want the offset values to be calculated as follows 0, 20, 20, 40, 40, 60, 60 .. 
        var offset = gap * Math.ceil(index/2); 
        // Now we need the vertices to be placed at points which are 'offset' pixels distant 
        // from the first link and forms a perpendicular angle to it. And as index goes up 
        // alternate left and right. 
        // 
        //^odd indexes 
        // | 
        // |----> index 0 line (straight line between a source center and a target center. 
        // | 
        // v even indexes 
        var sign = index % 2 ? 1 : -1; 
        var angle = joint.g.toRad(theta + sign * 90); 
        // We found the vertex. 
        var vertex = joint.g.point.fromPolar(offset, angle, midPoint); 
        sibling.set('vertices', [{ x: vertex.x, y: vertex.y }]); 
       }); 
      } 
     }; 


     var myAdjustVertices = _.partial(adjustVertices, graph); 
     // adjust vertices when a cell is removed or its source/target was changed 
     graph.on('add remove change:source change:target', myAdjustVertices); 
     // also when an user stops interacting with an element. 
     graph.on('cell:pointerup', myAdjustVertices);