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
| property | explanation | type | default value |
|---|---|---|---|
bounds  | the bounding rectangle of the path | Rectangle | |
| x | the x coordinate of the center of the path bounds | Number | |
| y | the y coordinate of the center of the path bounds | Number | |
| curveMode | how the segments are drawn, possible values | String | “linear” |
| vertices | the vertices along the path | Array of Vertex | |
| segments | the segments on the path | Array of Segment | |
| firstVertex | returns the first vertex of the path | Vertex | |
| firstSegment | returns the first segment of the path | Segment | |
| fillColor | the fill color of the path if it is closed | Color | undefined |
| strokeColor | the stroke color of the path | Color | “#ccc” |
| strokeDash | the dashes and gaps for the path stroke | String | “none” |
| strokeWidth | the stroke width of the path in pixels | Number | 1 |
| vxShape | the shape of the vertices on this path possible values: “rect”, “circle” | String | undefined |
| vxWidth | the width of the vertices on this path | Number | 0 |
| vxHeight | the height of the vertices on this path | Number | 0 |
| vxRadius | the radius of the vertices on this path if the shape is “circle” | Number | 0 |
| vxFillColor | the fill color of the vertices on this path | Color | “#555” |
| vxStrokeColor | the stroke color of the vertices on this path | Color | “#aaa” |
| vxStrokeWidth | the stroke width of the vertices on this path in pixels | Number | 0 |
| vxOpacity | the opacity of the vertices on this path | Number | 1 |
Properties inherited from Mark
| property | explanation | type | default value |
|---|---|---|---|
| id | the unique id of the path | String | |
| type | the type of the path | String | “path” |
| dataScope | the data scope of the path | DataScope | undefined |
| opacity | the opacity value of the path (between 0 and 1) | Number | 1 |
| visibility | whether the path is visible (“visible” or “hidden”) | String | “visible” |
Methods
| method | explanation | return 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 element | String |
| 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
| method | explanation | return 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 resides | Scene |
| duplicate() | returns a copy of this mark | Path |