View
Initialization
Views in VGrammar are used to create specific graphics. The definition of IViewConstructor
is as follows:
Usage example:
The options
support the following configurations:
Property Name | Type | Mandatory | Description |
---|---|---|---|
width | number | No | Sets the width of the canvas |
height | number | No | Sets the height of the canvas |
container | string| HTMLElement | No | Sets the id or dom element of the container |
padding | CommonPaddingSpec | No | Sets the padding of the canvas |
autoFit | boolean | No | Whether to automatically calculate the width and height of the canvas based on the container size |
options3d | srIOption3DType | No | 3d related configuration, supports two properties\nenable : Enable 3d rendering; enableView3dTranform : Support 3d viewing angle transformation |
hover | boolean | No | Whether to configure hover interaction by default |
select | boolean | No | Whether to enable selection interaction |
cursor | boolean | No | Whether to enable cursor settings |
logger | Logger | No | Externally provided logger method |
logLevel | number | No | Sets the log level, 0 - None; 1 - Error; 2 - Warn; 3 - Info; 4 - Debug |
domBridge | any | No | worker exclusive |
hooks | Hooks | No | Lifecycle and other event hooks |
eventConfig | IViewEventConfig | No | Event related configuration |
mode | EnvType | No | Environmental parameters |
modeParams | any | No | Custom configurations for various environments |
dpr | number | No | Pixel ratio |
viewBox | IBoundsLike | No | Manually set the ViewBox where the canvas is located |
background | IColor | No | Background color |
renderCanvas | string|HTMLCanvasElement | No | In non-browser environments, such as mini-programs, you need to pass in a wrapped pseudo canvas instance |
canvasControled | boolean | No | Whether it is a controlled canvas, if not, no resize operations will be performed |
stage | IStage | No | vRender stage |
layer | ILayer | No | vRender layer |
rendererTitle | string | No | When the container is not set, the title attribute is set on the dom element automatically created internally |
renderStyle | string | No | Rendering style |
disableDirtyBounds | boolean | No | Whether to disable dirtyBounds |
beforeRender | beforeRender | No | |
afterRender | afterRender | No | |
parseMarkBounds | parseMarkBounds | No | |
doLayout | doLayout | No |
Instance Properties
renderer
【Read-only property】,get the underlying renderer
rootMark
【Read-only property】,get the root element of Mark
grammars
【Read-only property】,get instances corresponding to all grammar elements
Instance Methods
signal
Create a Signal
instance, and the corresponding ts type definition is:
Accept two parameters, the first parameter is used to set the initial value, and the second parameter is used to set the updater callback function; when the dependent grammar elements are updated, the callback function set by the second parameter will be called for updates; The return value is a Signal
instance;
The meanings of the second parameter configuration are as follows:
Support multiple formatting configurations:
- Format 1:
Where T
is the type definition of ts generic, meaning the type of Signal
value;
- Format 2:
For configuring the current element depends on the value of other signal
instances
- Format 3:
Set the dependent grammar element corresponding to id
or instance through the dependency
property, set a custom callback function through callback
, and calculate the update method for the current element
Usage example:
data
Create a Data
instance, with the corresponding ts type definition being:
Accept an optional parameter for the raw value of the data; Using method as:
scale
Create a Scale
instance,
corresponding ts type definition is:
Accept a parameter to declare the type of Scale
, supported types include:
- 'linear'
- 'log'
- 'pow'
- 'sqrt'
- 'symlog'
- 'time'
- 'utc'
- 'quantile'
- 'quantize'
- 'threshold'
- 'ordinal'
- 'point'
- 'band'
Usage example:
coordinate
Create a Coordinate
instance; ts type definition is:
Accept a parameter to declare the type of Coordinate
, supported types include:
- 'cartesian'
- 'polar'
mark
Create a Mark
instance, ts type definition is:
The first parameter type
corresponds to the type of Mark
, and the supported types include:
- 'arc'
- 'area'
- 'circle'
- 'image'
- 'line'
- 'path'
- 'rect'
- 'rule'
- 'shape'
- 'symbol'
- 'text'
- 'richtext'
- 'polygon'
- 'rect3d'
- 'pyramid3d'
- 'arc3d'
- 'cell'
- 'interval'
- 'group'
- 'glyph'
- 'component'
The second parameter group
is used to set the parent node of the current mark
, supporting two types:
- Set the
id
of the parentmark
- Set the parent
mark
instance
If not set, the default value is rootMark
.
The third parameter markOptions
is used to set more properties. The parameter type is Object
, and the corresponding ts type definition is:
glyphType
: used to set the specificglyph
type, valid only whentype = 'glyph'
componentType
: used to set the specific component type, effective only whentype = 'component'
mode
: used to set whether to support 3d mode, effective only whentype = 'component' & componentType = "axis"
group
Create a GroupMark
instance, ts type definition is:
The following two usage methods are equivalent:
glyph
Create a GlyphMark
instance, ts type definition is:
The following two usage methods are equivalent:
component
Create a Component
instance, ts type definition as follows:
The following two usage methods are equivalent:
axis
Create an axis component, ts type definition as follows:
The following three usage methods are equivalent:
legend
Create a legend component, ts type definition as follows:
The following three usage methods are equivalent:
crosshair
Create a crosshair component, ts type definition as follows:
The following three usage methods are equivalent:
slider
Create a slider component, ts type definition as follows:
The following three usage methods are equivalent:
label
Create a label component, ts type definition as follows:
The following three usage methods are equivalent:
player
Create a player component, ts type definition as follows:
The following three usage methods are equivalent:
tooltip
Create a tooltip component, ts type definition as follows:
The following three usage methods are equivalent:
getGrammarById
Method to get grammar elements by id
, ts type definition is as follows:
getCustomizedById
Method to get custom grammar elements by id
, ts type definition is as follows:
getSignalById
Method to get grammar element Signal instance by id
, ts type definition is as follows:
getDataById
Method to get grammar element Data instance by id
, ts type definition is as follows:
getScaleById
Method to get grammar element Scale instance by id
, ts type definition is as follows:
getCoordinateById
Method to get grammar element Coordinate instance by id
, ts type definition is as follows:
getMarkById
Method to get grammar element Mark instance by id
, ts type definition is as follows:
getGrammarsByName
Method to get all grammar elements with the declared name
attribute, ts type definition is as follows:
getGrammarsByType
Method to get all grammar elements with the type
attribute, ts type definition is as follows:
Currently supported grammarType
include:
- 'data'
- 'signal'
- 'scale'
- 'mark'
- 'coordinate'
As well as custom registered grammar elements, such as 'projection'
getMarksByType
Method to return all mark
instances of the mark
type, ts type definition is as follows:
Refer to the mark()
method above for supported enumeration values of markType
parseSpec
Set all grammar elements through a unified spec
configuration, ts type definition is as follows:
updateSpec
Update spec
configuration, ts type definition is as follows:
run
Run the entire View, ts type definition is as follows:
Where runningConfig
is used to set global transition and other animation related configurations when updating the view
runBefore
Set the callback function before each view is updated and run. The ts type definition is as follows:
runAfter
Set the callback function after each view is updated and run. The ts type definition is as follows:
background
Set or read the background color. The ts type definition is as follows:
width
Set or read the width of the entire canvas. The ts type definition is as follows:
height
Set or read the height of the entire canvas. The ts type definition is as follows:
viewWidth
Set or read the width of the view canvas after deducting padding
. The ts type definition is as follows:
viewHeight
Set or read the height of the view canvas after deducting padding
. The ts type definition is as follows:
padding
Set or read the padding
. The ts type definition is as follows:
addEventListener
Add event listeners. The ts type definition is as follows:
removeEventListener
Remove event listeners. The ts type definition is as follows:
emit
Trigger custom events. The ts type definition is as follows:
The first parameter is the custom event name; Other parameters are the custom parameters corresponding to the event.
resize
Adjust the width and height of the canvas. The ts type definition is as follows:
When the width
or height
changes, if render
is not false
, it will trigger the underlying shape redraw.
tranverseMarkTree
Traverse the entire mark instance tree and execute the corresponding logic. The ts type definition is as follows:
The first parameter is used to set the callback function for each mark
instance;
The second parameter is used to set the filter function for each mark
instance;
The third parameter is used to set whether leaf nodes have priority execution.
pauseProgressive
Pause the progressive rendering process, if any.
resumeProgressive
Resume the progressive rendering process, if any.
restartProgressive
Restart the progressive rendering process, if any.
release
Release and destroy the view.