Element Grid
JXG.GeometryElement
↳ JXG.Curve
↳ Grid
Creates a grid to support the user with element placement or to improve determination of position.
Defined in: grid.js.
Extends
JXG.Curve.
Constructor Attributes | Constructor Name and Description |
---|---|
A grid is a set of vertical and horizontal lines or other geometrical objects (faces)
to support the user with element placement or to improve determination of position.
|
Field Attributes | Field Name and Description |
---|---|
To print a quadratic grid with same distance of major grid elements in x- and y-direction.
|
|
Deprecated.
|
|
Deprecated.
|
|
To decide whether major or minor grid elements on boundaries of the boundingBox shall be shown, half-ones as well.
|
|
This object contains the attributes for major grid elements.
|
|
This attribute determines whether the grid elements located at x=0, y=0
and especially at (0, 0) are displayed.
|
|
Appearance of major grid element.
|
|
This number (pixel value) controls where infinite lines end at the canvas border.
|
|
Number of vertices for face 'polygon'.
|
|
Size of major grid elements.
|
|
Distance of major grid elements.
|
|
This object contains the attributes for minor grid elements.
|
|
This attribute determines whether the minor grid elements located at x=0 and y=0 are displayed.
|
|
Appearance of minor grid elements.
|
|
This number (pixel value) controls where infinite lines end at the canvas border.
|
|
Number of vertices for face 'polygon'.
|
|
Size of minor grid elements.
|
|
Number of elements in minor grid between elements of the major grid.
|
|
<private> |
Array of theme attributes.
|
- Methods borrowed from class JXG.Curve:
- addTransform, allocatePoints, generateTerm, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, X, Y, Z
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Events borrowed from class JXG.GeometryElement:
- attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
Grid
A grid is a set of vertical and horizontal lines or other geometrical objects (faces)
to support the user with element placement or to improve determination of position.
This method takes up to two facultative parent elements. These are used to set distance between
grid elements in case of attribute majorStep or minorElements is set to 'auto'.
Then the major/minor grid element distance is set to the ticks distance of parent axes.
It is usually instantiated on the board's creation via the attribute grid set to true.
-
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create
with type "grid".
- Possible parent array combinations are:
-
{JXG.Axis} a1
{JXG.Axis} a2
- Optional parent axis.
- Throws:
- {Error}
- If the element cannot be constructed with the given parent objects an exception is thrown.
- Examples:
// standard grid var g = board.create('grid', [], { drawZero: true, });
// more fancy grid var g = board.create('grid', [], { major: { face: 'plus', size: 10, strokeColor: '#080050', strokeOpacity: 1, }, minor: { size: 3 }, drawZero: true, minorElements: 4, });
// extreme fancy grid var grid = board.create('grid', [], { major: { face: 'regularPolygon', size: 10, strokeColor: 'blue', fillColor: 'orange', strokeOpacity: 1, drawZero: true, }, minor: { face: 'diamond', size: 3, strokeColor: 'green', fillColor: 'grey', drawZero: true, }, minorElements: 1, includeBoundaries: false, });
// grid with parent axes var axis1 = board.create('axis', [[-1, -2.5], [1, -2.5]], { ticks: { strokeColor: 'green', strokeWidth: 2, minorticks: 2, majorHeight: 10, drawZero: true } }); var axis2 = board.create('axis', [[3, 0], [3, 2]], { ticks: { strokeColor: 'red', strokeWidth: 2, minorticks: 3, majorHeight: 10, drawZero: true } }); var grid = board.create('grid', [axis1, axis2], { major: { face: 'line', drawZero: true }, minor: { face: 'point', size: 3 }, minorElements: 'auto', includeBoundaries: false, });
Attribute Detail
forceSquare
To print a quadratic grid with same distance of major grid elements in x- and y-direction.
'min' or true will set both distances of major grid elements in x- and y-direction to the primarily lesser value,
'max' to the primarily greater value.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- false
gridX
- Default Value:
- null
gridY
- Default Value:
- null
includeBoundaries
To decide whether major or minor grid elements on boundaries of the boundingBox shall be shown, half-ones as well.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- false
{Object}
major
This object contains the attributes for major grid elements.
Defined in: options.js.
Defined in: options.js.
- See:
- Grid#major_size
- Grid#major_face
- Grid#major_margin
- Grid#major_drawZero
- Grid#major_polygonVertices
major_drawZero
This attribute determines whether the grid elements located at x=0, y=0
and especially at (0, 0) are displayed.
This attribute is a sub-entry of Grid#major: major: {drawZero: ...}
Defined in: options.js.
- If false, then all these elements are hidden.
- If true, all these elements are shown.
- If an object of the following form is given, the three cases can be distinguished individually:
{x: true|false, y: true|false, origin: true|false}
This attribute is a sub-entry of Grid#major: major: {drawZero: ...}
Defined in: options.js.
- Default Value:
- false
major_face
Appearance of major grid element.
There are different styles which differ in appearance.
Possible values are (comparing to Point#face)
This attribute is a sub-entry of Grid#major: major: {face: ...}
Defined in: options.js.
Input | Output | Fillable by fillColor,... |
---|---|---|
point, . | . | no |
line | − | no |
cross, x | x | no |
circle, o | o | yes |
square, [] | [] | yes |
plus, + | + | no |
minus, - | - | no |
divide, | | | | no |
diamond, <> | <> | yes |
diamond2, <<>> | <> (bigger) | yes |
triangleup, ^, a, A | ^ | no |
triangledown, v | v | no |
triangleleft, < | < | no |
triangleright, > | > | no |
regularPolygon, regpol | ⬡ | yes |
This attribute is a sub-entry of Grid#major: major: {face: ...}
Defined in: options.js.
- Default Value:
- 'line'
{Number}
major_margin
This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line
ends exactly at the border, if negative there is a margin to the inside, if positive the line
ends outside of the canvas (which is invisible).
This attribute is a sub-entry of Grid#major: major: {margin: ...}
Defined in: options.js.
This attribute is a sub-entry of Grid#major: major: {margin: ...}
Defined in: options.js.
- Default Value:
- 0
major_polygonVertices
Number of vertices for face 'polygon'.
This attribute is a sub-entry of Grid#major: major: {polygonVertices: ...}
Defined in: options.js.
This attribute is a sub-entry of Grid#major: major: {polygonVertices: ...}
Defined in: options.js.
- Default Value:
- 6
major_size
Size of major grid elements. There are the following possibilities:
This attribute is a sub-entry of Grid#major: major: {size: ...}
Defined in: options.js.
- Numbers or strings which are numbers (e.g. '10') are interpreted as size in pixels.
- Strings with additional '%' (e.g. '95%') are interpreted as the ratio of used space for one element.
This attribute is a sub-entry of Grid#major: major: {size: ...}
Defined in: options.js.
- Default Value:
- 5
majorStep
Distance of major grid elements. There are three possibilities:
Defined in: options.js.
- If it is set to 'auto' the distance of the major grid equals the distance of majorTicks of the corresponding axis.
- Numbers or strings which are numbers (e.g. '10') are interpreted as distance in usrCoords.
- Strings with the unit 'px' are interpreted as distance in screen pixels.
- Strings with the unit '%' or 'fr' are interpreted as a ratio to the width/height of the board. (e.g. 50% = 0.5fr)
Defined in: options.js.
- Default Value:
- 'auto'
{Object}
minor
This object contains the attributes for minor grid elements.
Defined in: options.js.
Defined in: options.js.
- See:
- Grid#minor_size
- Grid#minor_face
- Grid#minor_margin
- Grid#minor_drawZero
- Grid#minor_polygonVertices
minor_drawZero
This attribute determines whether the minor grid elements located at x=0 and y=0 are displayed.
This attribute is a sub-entry of Grid#minor: minor: {drawZero: ...}
Defined in: options.js.
- If false, then all these elements are hidden.
- If true, all these elements are shown.
- If an object of the following form is given, the three cases can be distinguished individually:
{x: true|false, y: true|false}
This attribute is a sub-entry of Grid#minor: minor: {drawZero: ...}
Defined in: options.js.
- Default Value:
- false
minor_face
Appearance of minor grid elements. Same options as for major grid elements.
This attribute is a sub-entry of Grid#minor: minor: {face: ...}
Defined in: options.js.
This attribute is a sub-entry of Grid#minor: minor: {face: ...}
Defined in: options.js.
- See:
- Grid#major_face
- Default Value:
- 'point'
{Number}
minor_margin
This number (pixel value) controls where infinite lines end at the canvas border. If zero, the line
ends exactly at the border, if negative there is a margin to the inside, if positive the line
ends outside of the canvas (which is invisible).
This attribute is a sub-entry of Grid#minor: minor: {margin: ...}
Defined in: options.js.
This attribute is a sub-entry of Grid#minor: minor: {margin: ...}
Defined in: options.js.
- Default Value:
- 0
minor_polygonVertices
Number of vertices for face 'polygon'.
This attribute is a sub-entry of Grid#minor: minor: {polygonVertices: ...}
Defined in: options.js.
This attribute is a sub-entry of Grid#minor: minor: {polygonVertices: ...}
Defined in: options.js.
- Default Value:
- 6
minor_size
Size of minor grid elements. There are the following possibilities:
This attribute is a sub-entry of Grid#minor: minor: {size: ...}
Defined in: options.js.
- Numbers or strings which are numbers (e.g. '10') are interpreted as size in pixels.
- Strings with additional '%' (e.g. '95%') are interpreted as the ratio of used space for one element.
This attribute is a sub-entry of Grid#minor: minor: {size: ...}
Defined in: options.js.
- Default Value:
- 5
minorElements
Number of elements in minor grid between elements of the major grid. There are three possibilities:
Defined in: options.js.
- If set to 'auto', the number minor elements is equal to the number of minorTicks of the corresponding axis.
- Numbers or strings which are numbers (e.g. '10') are interpreted as quantity.
Defined in: options.js.
- Default Value:
- 0
<private>
themes
Array of theme attributes.
The index of the entry is the number of the theme.
Defined in: options.js.
Defined in: options.js.
// Theme 1 // quadratic grid appearance with distance of major grid elements set to the primarily greater one const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-4, 4, 4, -4], axis: true, defaultAxes: { x: { ticks: {majorHeight: 10} }, y: { ticks: {majorHeight: 10} } }, grid: { theme: 1, color: 'grey' }, });
// Theme 2 // lines and subtile points in between const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-4, 4, 4, -4], axis: false, grid: { theme: 2, minorElements: 4, color: 'grey' }, });
// Theme 3 // lines and thinner lines in between const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-4, 4, 4, -4], axis: false, grid: { theme: 4, minorElements: 4, color: 'grey' }, });
// Theme 4 // lines with more subtle grid of '+'s plotted in between const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-4, 4, 4, -4], axis: false, grid: { theme: 5, minorElements: 4, color: 'grey' }, });
// Theme 5 // grid of '+'s and more subtile points in between const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-4, 4, 4, -4], axis: false, grid: { theme: 6, minorElements: 4, color: 'grey' }, });
// Theme 6 // grid of circles with subtile points in between const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-4, 4, 4, -4], axis: false, grid: { theme: 3, minorElements: 4, strokeColor: 'grey' }, });
// Theme 7 // lines and subtile points in between, also plotted on axes const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-4, 4, 4, -4], axis: false, grid: { theme: 7, minorElements: 4, color: 'grey' }, });
Attributes borrowed from other Elements
- Attributes borrowed from class JXG.Curve:
- lineCap
- Attributes borrowed from class JXG.GeometryElement:
- dash, dashScale, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, needsRegularUpdate, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, viewport, visible, withLabel
Fields borrowed from other Elements
- Fields borrowed from class JXG.Curve:
- dataX, dataY, numberPoints, qdt, ticks
- Fields borrowed from class JXG.GeometryElement:
- _org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc
Methods borrowed from other Elements
- Methods borrowed from class JXG.Curve:
- addTransform, allocatePoints, generateTerm, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, X, Y, Z
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
Events borrowed from other Elements