Rect

extends Path

The Rect class represents a rectangular mark. To create a Rect object, use the mark method in the Scene class, for example:

    let rect = scene.mark("rect", {top: 50, left: 100, width: 200, height: 80, fillColor: "blue"});

Properties#

property	explanation	type	default value
area	the area of the rectangle	Number
bottom	the y coordinate of the bottom of the rectangle	Number
bottomSegment	the bottom segment of the rectangle	Segment
height	the height of the rectangle	Number	100
left	the x coordinate of the left hand side of the rectangle	Number	0
leftSegment	the left segment of the rectangle	Segment
right	the x coordinate of the right hand side of the rectangle	Number
rightSegment	the right segment of the rectangle	Segment
top	the y coordinate of the top of the rectangle	Number	0
topSegment	the top segment of the rectangle	Segment
width	the width of the rectangle	Number	100

Properties inherited from Path#

property	explanation	type	default value
curveMode	how the segments are drawn	String	“linear”
firstSegment	returns the first segment of the path	Segment
firstVertex	returns the first vertex of the path	Vertex
segments	the segments on the path	Array
vertices	the vertices along the path	Array
vxFillColor	the fill color of the vertices on this path	Color	“#555555”
vxHeight	the height of the vertices on this path	Number	0
vxOpacity	the opacity of the vertices on this path	Number	1
vxRadius	the radius of the vertices on this path if the shape is “circle”	Number	0
vxShape	the shape of the vertices on this path possible values: “rect”, “circle”	String	undefined
vxStrokeColor	the stroke color of the vertices on this path	Color	“#aaaaaa”
vxStrokeWidth	the stroke width of the vertices on this path in pixels	Number	0
vxWidth	the width of the vertices on this path	Number	0
x	the x coordinate of the center of the path bounds	Number
y	the y coordinate of the center of the path bounds	Number

Properties inherited from Mark#

property	explanation	type	default value
bounds	the bounding rectangle of the mark	Rectangle
dataScope	the data scope of the mark	DataScope	undefined
fillColor	the fill color of the mark	Color	“#fff”
id	the unique id of the mark	String
opacity	the opacity value of the mark (between 0 and 1)	Number	1
strokeColor	the stroke color of the mark	Color	“#ccc”
strokeDash	the dashes and gaps for the mark stroke	String	“none”
strokeWidth	the stroke width of the mark in pixels	Number	1
type	the type of the mark	String	“rect”
visibility	whether the mark is visible (“visible” or “hidden”)	String	“visible”

Methods#

Methods inherited from Path#