Lines

Properties to adjust Lines


adjustBezier boolean
Flag to automatically select the bezier line type. the bezier can start from the top or bottom (vertical), or from the side (horizontal). This will be based on the location of the two points joined by the line.
Default: false
arrows array Private
Arrows for the edges (or connections) in network graphs.
There are three arrow types: arrow, square and round. They can be at the start or at the end of the line. To specify an arrow at the start of the line include a startArrow property in the edge; to specify an arrow at the end of the line include a endArrow property in the edge. For example in this edge object:
{ ..., type : 'line', startArrow : 'square', endArrow : 'arrow', ... }
See also: lines
Default: [arrow, square, round]
Options: arrow, square, round
dashLength integer
Size in pixels of the length of the dashes and the separation between the dashes in the dashed lines.
Default: 8
lineWidthEvent integer Private
Size in pixels of the width for the events in the lines.
Default: 2
lines array Private
Line types in network graphs for the edges (or connections) between network nodes.
There are three styles: solid, dashed and dotted and four sub types: straight, bezier, curved (clockwise) and curvedCC (counter clockwise). The line types can be any combination of a style followed by a subtype. By default the type is always a solid straight line so there is no need to specify solid or stright as a style if there is a subtype.
Lines can also have elbows which are specified as a 2D-array. In the case a straight solid line each elements in the array will have an x,y coordinate and each segment will be perpendicular to the previous one. For example in this edge object:
{ ..., type : 'line', elbows : [ [20, 40], [60, 80] ], ... }
A special subtype of line called segmented can also have elbows which are not perpendicalar to each other. For example in this edge object:
{ ..., type : 'segmented', elbows : [ [20, 40], [60, 80] ], ... }
In the case of a bezier curved each element of the array will have an x,y coordinate for the control point 1, an x,y coordinate for the control point 2 and an x,y coordinate for the end of the line.
{ ..., type : 'bezier', elbows : [ [20, 40, 40, 20, 40, 40], ... ], ... }
If the property elbow is specified the line will be drawn using the first and last elements of the array rather than the coordinates of the two nodes. A property startX and startY can be used to better adjust the position of the starting line. Similarly, a property endX and endY can be used to better adjust the position of the end line. These properties have a maginitud between -1 to 1 which will be used based on the width and height of the source and target node. For example in the following edge object the line will start in the middle bottom of the source node and will end at the upper left of the target node.
{ ..., type : 'line', startX : 0, startY : 1, endX : -1, endY : -0.5, ... }
See also: arrows
Default: [line, solid, straight, bezier, curved, curvedCC, dashedLine, dashedBezier, dashedCurved, dashedCurvedCC, dottedLine, dottedBezier, dottedCurved, dottedCurvedCC]
Options: line, solid, straight, bezier, curved, curvedCC, dashedLine, dashedBezier, dashedCurved, dashedCurvedCC, dottedLine, dottedBezier, dottedCurved, dottedCurvedCC
outlineWidth float
Default width in pixels for lines in networks and other line elements in all visualizations except for the lines in the line plots.
See also: lineThickness
Default: 1