Arc

extends Path

The Arc class represents a sector mark that is used in a Doughnut Chart and a Sunburst Chart. This class is also used to represent a pie mark that is used in a pie chart. A pie is a special arc where the inner radius is 0. To create an Arc object, use the mark method in the Scene class, for example:

    let arc = scene.mark("arc", {x: 100, y: 100, innerRadius: 20, outerRadius: 40, startAngle: 0, endAngle: 90});

You can also use the divide operation to transform a Ring to a collection of Arc objects, or transform a Circle to a collection of pie marks. Here is an explanation of the divide operation.

Properties#

property	explanation	type	default value
angle	the angle between the start angle and the end angle in degrees	Number	90
direction	the direction in which the arc is drawn	String	“anti-clockwise”
endAngle	the end angle of the arc in degrees	Number	90
innerRadius	the inner radius of the arc	Number	100
outerRadius	the outer radius of the arc	Number	200
startAngle	the start angle of the arc in degrees	Number	0
thickness	the difference between the outer radius and inner radius	Number	100
x	the x coordinate of the center of the arc	Number	100
y	the y coordinate of the center of the arc	Number	100

Angles in Mascot are specified using the polar coordinate system, where 0 is at the positive x axis, and the angle increases in the counterclockwise direction. The figure below illustrates various values of startAngle and endAngle.

The same applies to a pie mark as well:

Properties inherited from Path#

property	explanation	type	default value
anyVertex	returns any vertex of the path	Vertex
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 of Segment
vertices	the vertices along the path	Array of Vertex
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

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	“none”
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 (“arc” or “pie” when innerRadius is 0)	String	“arc”
visibility	whether the mark is visible (“visible” or “hidden”)	String	“visible”

Methods#