Path

extends Mark
Subclasses: RectPath, CirclePath, AreaPath, PolygonPath, ArcPath, RingPath

The Path class represents a gemetric path consisting of multiple vertices connected by segments. To create a path object, use the mark method in the Scene class, for example:

    let path = scene.mark("path", {
                  vertices: [
		                [200, 50], [350, 50], [500, 50]
                  ],
                  strokeColor: "#95D0F5"
              });

A straight line is also represented as a path object in Mascot. The following code returns a Path object with two vertices.

    let line = scene.mark("line", {x1: 0, y1: 20, x2: 300, y2: 50});

Properties

propertyexplanationtypedefault value
bounds the bounding rectangle of the pathRectangle
x the x coordinate of the center of the path boundsNumber
y the y coordinate of the center of the path boundsNumber
curveModehow the segments are drawn, possible valuesString“linear”
vertices the vertices along the pathArray of Vertex
segments the segments on the pathArray of Segment
firstVertex returns the first vertex of the pathVertex
firstSegment returns the first segment of the pathSegment
fillColorthe fill color of the path if it is closedColorundefined
strokeColorthe stroke color of the pathColor“#ccc”
strokeDashthe dashes and gaps for the path strokeString“none”
strokeWidththe stroke width of the path in pixelsNumber1
vxShapethe shape of the vertices on this path
possible values: “rect”, “circle”
Stringundefined
vxWidththe width of the vertices on this pathNumber0
vxHeightthe height of the vertices on this pathNumber0
vxRadiusthe radius of the vertices on this path if the shape is “circle”Number0
vxFillColorthe fill color of the vertices on this pathColor“#555”
vxStrokeColorthe stroke color of the vertices on this pathColor“#aaa”
vxStrokeWidththe stroke width of the vertices on this path in pixelsNumber0
vxOpacitythe opacity of the vertices on this pathNumber1

Properties inherited from Mark

propertyexplanationtypedefault value
id the unique id of the pathString
type the type of the pathString“path”
dataScopethe data scope of the pathDataScopeundefined
opacitythe opacity value of the path (between 0 and 1)Number1
visibilitywhether the path is visible (“visible” or “hidden”)String“visible”

Methods

methodexplanationreturn type
addVertex(x, y, i)adds a vertex at the specified index with specified coordinates
x (Number): x coordinate
y (Number): y coordinate
i (Number): index to add the vertex
void
getSVGPathData()returns a string to be used as the d parameter in an SVG path elementString
sortVertices
(channel, reverse)
sort the vertices by a visual channel
channel (String): the channel to sort the vertices by (type String)
reverse (Boolean, optional): setting to true will sort in descending order;
default is false.
void
sortVerticesByData
(field, reverse, order)
sort the vertices by a data field
field (String): the data field to sort the vertices by (type String)
reverse (Boolean, optional): setting to true will sort in descending order;
default is false.
order (Boolean, optional): an array of field values in ascending order
void

Methods inherited from Mark

methodexplanationreturn type
contains(x, y)whether this path contains a point
x (Number): x coordinate of the point
y (Number): y coordinate of the point
Boolean
getScene()returns the scene in which this mark residesScene
duplicate()returns a copy of this markPath