RingPath

extends Path

The RingPath class represents a ring mark that is used in a Doughnut Chart and a Sunburst Chart. To create a RingPath object, use the mark method in the Scene class, for example:

    let ring = scene.mark("ring", {x: 50, y: 100, innerRadius: 20, outerRadius: 40});

Properties

propertyexplanationtypedefault value
innerRadiusthe inner radius of the ringNumber100
outerRadiusthe outer radius of the ringNumber200
thickness the difference between the outer radius and inner radiusNumber100

Properties inherited from Path

propertyexplanationtypedefault value
bounds the bounding rectangle of the pathRectangle
xthe x coordinate of the center of the ringNumber0
ythe y coordinate of the center of the ringNumber0
vertices the vertices along the pathArray
segments the segments on the pathArray
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
opacitythe opacity value of the path (between 0 and 1)Number1
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“circle”
dataScopethe data scope of the pathDataScopeundefined

Methods inherited from Path

methodexplanationreturn type
getSVGPathData()returns a string to be used as the d parameter in an SVG path elementString

Methods inherited from Mark

methodexplanationreturn type
getScene()returns the scene in which this mark residesScene
duplicate()returns a copy of this markCirclePath