Creating Directed Links

[JointJS Newb]

Hello,

Does the Joint JS library provide a way to create directed links?  I am trying to create a link that has only one arrow head, i.e. [Source Element]  ----->  [Target Element], as opposed to two arrow heads, i.e. [Source Element]  <----->  [Target Element].

I have, so far, been able to only hide both arrow heads or show both arrow heads.  The code below demonstrates how I have hidden both arrow heads.

graph = new joint.dia.Graph;

graphJSON = {cells: []};

linkJSON = {

    id: "myLink",

    source:  {id: "sourceElement"},

    target: {id: "targetElement"},

    attrs: {

        ".marker-arrowheads": {display: "none"}

    }

};

graphJSON.cells.push(graphJSON);

graph.fromJSON(graphJSON);

[JointJS Newb]

I should mention that I have figured out how to create directed edges using Joint JS and jQuery.  However, I am trying to find out if the library provides a way to do so on its own.

My solution Joint JS + jQuery solution involves the code I posted earlier, followed by the line below.

$(".marker-arrowheads .marker-arrowhead-group:first-child").hide();

[dave]

.marker-source and .marker-target are SVG <path>s (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path?redirectlocale=en-US&redirectslug=SVG%2FElement%2Fpath) that you can set whatever attributes you like on. The important one for you is probably the 'd' attribute (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d). For example:

var link = new joint.dia.Link({

    source: { id: r3.id },

    target: { id: r4.id },

    attrs: {

        '.marker-source': { d: 'M 10 0 L 0 5 L 10 10 z' },

        '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }

    }

});

This creates <---> type of link. Another example:

var link = new joint.dia.Link({

    source: { id: r3.id },

    target: { id: r4.id },

    attrs: {

        '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }

    }

});

This creates a ----> type of link.

You can find some other examples on link styling here: https://github.com/DavidDurman/joint/blob/master/demo/links.js and also here: http://jointjs.com/tutorial#link-styling  (source code of this tutorial is here: http://jointjs.com/js/tutorial.js   (search for the linkStyling() function).

[JointJS Newb]

That solution worked like a charm.  Thank you, Dave.

It looks like a broken path to the joint.css file was keeping me from being able to properly manipulate the ".marker-source" and ".marker-target" properties.