Create Horizontal lines in jointjs

Question

How to create horizontal line in jointjs.I want to draw simple horizontal lines between two points in joint js .Can someone please tell me how to do that.

My papers look like :

  var paper = new joint.dia.Paper({
        el: $('#myholder'),
        width: w,
        height:h,
        model: graph,
        gridsize:4
    });
    var paper2 = new joint.dia.Paper({
        el: $('#myimage'),
        width: w,
        height:600,
        model: graph,
        interactive : false
    });

And I have created two horizontal line like:

  var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
    V(paper.viewport).append(line);
    V(paper2.viewport).append(line);

But I am not getting the line in paper while line is printed in paper2

Answer 1

You can use a link for that:

graph.addCell(new joint.dia.Link({
   source: { x: 50, y: 100 },
   target: { x: 300, y: 100 }
}))

Or SVG:

var line = V('line', { x1: 50, y1: 100, x2: 300, y2: 100, stroke: 'black' });
V(paper.viewport).append(line);

V is a global variable exported by JointJS and is a tiny library for easier SVG manipulation that is called Vectorizer (http://jointjs.com/api#v).

Keep in mind that if you want to add another line into the other paper (paper2), you must first clone the first one:

V(paper2.viewport).append(line.clone())

If you don't do that, the line from paper is taken out and appended to the paper2, that's why you don't see the line in paper anymore.