Thickness, color and line style of edge can be set. Supports arrow. Various trend, and child components on edge (including text labe) can be distributed along the line. More edges can be displayed at the same time between two nodes. Supports looped effect of edge. 

Example for setting edge appearance

 Sets width, color and type of edge 

var a = graph.createNode("A", -100, 50);
var b = graph.createNode("B", 100, -50);
var edge = graph.createEdge(a, b);
edge.setStyle(Q.Styles.EDGE_COLOR, '#88AAEE');
edge.setStyle(Q.Styles.EDGE_WIDTH, 2);
edge.edgeType = Q.Consts.EDGE_TYPE_VERTICAL_HORIZONTAL;

Operating interface: 

Example of dotted line style of edge

 Set dotted line style of edge 

var a = graph.createNode("A", -100, 50);
var b = graph.createNode("B", 100, -50);
var edge1 = graph.createEdge(a, b, 'Edge');
edge1.edgeType = Q.Consts.EDGE_TYPE_ELBOW;
edge1.setStyle(Q.Styles.EDGE_LINE_DASH, [8, 4, 0.01, 4]);
edge1.setStyle(Q.Styles.LINE_CAP, "round");

Operating interface: 

Multi text label of edge

The edge can be set with several text label to show different information

Example

 Adds one text label on the edge 

var graph = new Q.Graph('canvas');
var A = graph.createNode("A", -100, -100);
var B = graph.createNode("B", 100, 0);
var edge = graph.createEdge("Edge", A, B);
var label2 = new Q.LabelUI();
label2.position = Q.Position.CENTER_TOP;
label2.anchorPosition = Q.Position.CENTER_BOTTOM;
label2.border = 1;
label2.padding = new Q.Insets(2, 5);
label2.showPointer = true;
label2.offsetY = -10;
label2.backgroundColor = "#EEE";
label2.fontSize = 16;
label2.fontStyle = "italic 100";
edge.addUI(label2, [{
    property : "label2",
    propertyType : Q.Consts.PROPERTY_TYPE_CLIENT,
    bindingProperty : "data"
}, {
    property : "label2.color",
    propertyType : Q.Consts.PROPERTY_TYPE_CLIENT,
    bindingProperty : "color"
}]);
edge.set("label2", "another label");

Operation effect