javascript - How to create links programmatically in JointJs to ports - Stack Overflow

admin管理员组

文章数量:1415111

I am trying to create links programmatically in JointJs to devs.Model objects that have ports.

I've tried to use the addCell for graph from the api (.dia.Graph:addCell), but for some reason the links created are not pointing to the correct port circles on the source and target devs.Model objects, but rather the entire element themselves.

Here is the code I'm attempting to use:

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)

The links are created, but not pointing to any ports, so I feel like there is just one little tweak I need to get these links to work.

I am trying to create links programmatically in JointJs to devs.Model objects that have ports.

I've tried to use the addCell for graph from the api (http://jointjs./api#joint.dia.Graph:addCell), but for some reason the links created are not pointing to the correct port circles on the source and target devs.Model objects, but rather the entire element themselves.

Here is the code I'm attempting to use:

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)

The links are created, but not pointing to any ports, so I feel like there is just one little tweak I need to get these links to work.

• javascript
• jointjs

Share Improve this question Follow edited Sep 10, 2019 at 7:12 Joshua 3,20633 gold badges2626 silver badges4141 bronze badges asked Jun 17, 2014 at 19:19 user3749851user3749851 6111 silver badge22 bronze badges 2

• This looks correct. Could you provide the full example, including your devs.Model. Do you have a port named 'in' and 'out' in your srcModel/dstModel? – dave Commented Jun 18, 2014 at 11:24
• Disregard please. Turns out there were a few bugs to work out, and this is working. Thanks, @dave. – user3749851 Commented Jun 19, 2014 at 16:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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)

Add connector and router. Example:

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

本文标签： javascriptHow to create links programmatically in JointJs to portsStack Overflow