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#
property | explanation | type | default value |
---|
innerRadius | the inner radius of the ring | Number | 100 |
outerRadius | the outer radius of the ring | Number | 200 |
thickness | the difference between the outer radius and inner radius | Number | 100 |
Properties inherited from Path#
property | explanation | type | default value |
---|
bounds | the bounding rectangle of the path | Rectangle | |
x | the x coordinate of the center of the ring | Number | 0 |
y | the y coordinate of the center of the ring | Number | 0 |
vertices | the vertices along the path | Array | |
segments | the segments on the path | Array | |
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 |
opacity | the opacity value of the path (between 0 and 1) | 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 | “circle” |
dataScope | the data scope of the path | DataScope | undefined |
Methods inherited from Path#
method | explanation | return type |
---|
getSVGPathData() | returns a string to be used as the d parameter in an SVG path element | String |
Methods inherited from Mark#
method | explanation | return type |
---|
getScene() | returns the scene in which this mark resides | Scene |
duplicate() | returns a copy of this mark | CirclePath |