Math

Math#

JSXGraph#

.. jsxgraph:: [name]#

This directive creates a graph based on JSXGraph. The graphs are constructed in JavaScript, by importing the jsxgraph module and calling initBoard() for each jsxgraph directive, referencing it by name. Alternatively, a template can be instantiated with the :template: option.

The aspect ratio of graph containers with keepAspectRatio: true (the default) is set automatically from the boundingBox. Otherwise, the aspect ratio defaults to 1 / 1, and can be overridden with the :style: option.

```{jsxgraph} sin
:style: aspect-ratio: 16 / 9;
```

<script type="module">
const [{initBoard}] = await tdoc.imports('tdoc/jsxgraph.js');
initBoard('sin', {
    boundingBox: [-7, 1.3, 7, -1.3], keepAspectRatio: false,
    axis: true, grid: true,
}, board => {
    board.create('functiongraph', [x => Math.sin(x)]);
});
</script>

Options

:class: name [name...] (IDs)#

A space-separated list of CSS classes to add to the graph container.

:style: property: value; [property: value; ...]#

CSS styles to apply to the graph container.

:template: name(args...)#

Instantiate a graph template using the given arguments. The arguments are given as a JSON5 array. jsxgraph directives instantiating a template must not have a name.

The following templates are predefined. Custom templates can be created in JavaScript via template().

  • grid(width = 35, height = 10, grid = {}, board = {})
    Render a grid.

    • width, height: The width and height of the grid.

    • grid: Grid attribute overrides.

    • board: Board attribute overrides.

    ```{jsxgraph}
:template: grid(17.5, 5, {minorElements: 9})
```

  • axes(boundingBox = [-11, 11, 11, -11], opts = {}, board = {})
    Render a set of axes and an optional grid.

    • boundingBox: The bounding box of the graph.

    • opts: Optional

      • majorX, majorY, major: The distance between major ticks on the X axis, Y axis, or both. The default is 1.

      • minorX, minorY, minor: The number of minor ticks between major ticks on the X axis, Y axis, or both. The default is 0.

      • labelsX, labelsY, labels: The labels to draw for major ticks on the X axis, Y axis or both. When a number is given, only the labels for multiples of that number are drawn. When an array is given, only the listed labels are drawn. The default is to draw all labels.

      • grid: Grid attribute overrides, or false to disable the grid. The default is to draw grid lines at major ticks of both axes.

    • board: Board attribute overrides.

    ```{jsxgraph}
:template: |
: axes([-2, 5, 25, -5],
:      {majorX: 5, minorX: 4, majorY: 2, minorY: 1, grid: {majorStep: 1}})
```

tdoc/jsxgraph.js#

This module (source) provides functionality related to jsxgraph directives.

jsxgraph.JXG#

The JXG namespace of the JSXGraph library.

jsxgraph.nonInteractive#

Mix-in board attributes to disable interactive features.

jsxgraph.withAxesLabels(xs, ys)#

Return mix-in board attributes to to draw only selected labels on the default axes. For number arguments, the labels that are their multiples are drawn. For array arguments, only the listed values are drawn.

Arguments:

  • xs (number|Array()) -- The labels to draw on the X axis.

  • ys (number|Array()) -- The labels to draw on the Y axis.

Returns:

An attribute object.

jsxgraph.merge(...attrs)#

Merge multiple attributes objects. Array arguments have their items merged recursively.

Arguments:

  • attrs (Array[Object|Array]()) -- The attribute objects to merge. Later arguments override earlier ones.

Returns:

The merged attribute object.

jsxgraph.initBoard(el, attrs[, fn])#

Render the content of a jsxgraph directive.

In addition to board attributes, attrs can specify per object type defaults for the graph in the defaults key, similar to how global defaults are specified in JXG.Options.

Arguments:

  • el (string()) -- The name of the jsxgraph directive to construct, or the wrapper DOM element that should contain the graph.

  • attrs (Object|Array()) -- The board attributes, passed to JSXGraph.initBoard(). If an Array of attributes is provided, they are merged with merge().

  • fn (function()) -- An optional function that is called with the Board as an argument.

Returns:

A Promise that resolves to the Board.

jsxgraph.template(name, fn)#

Render all jsxgraph directives referencing the template with the given name.

Arguments:

  • name (string()) -- The name of the template.

  • fn (function()) -- A function to be called for each jsxgraph directive to render. The function receives the wrapper DOM element as its first argument, and the arguments of the :template: option as remaining arguments.

```{jsxgraph}
:template: regular-polygon(4)
```
```{jsxgraph}
:template: regular-polygon(5)
```

<script type="module">
const [{initBoard, template}] = await tdoc.imports('tdoc/jsxgraph.js');
template('regular-polygon', (el, n) => {
    initBoard(el, {
        boundingBox: [-1.3, 1.3, 1.3, -1.3],
    }, board => {
        const n1 = 1 / n;
        board.create('regularpolygon', [
            [Math.cos(Math.PI * (-0.5 - n1)), Math.sin(Math.PI * (-0.5 - n1))],
            [Math.cos(Math.PI * (-0.5 + n1)), Math.sin(Math.PI * (-0.5 + n1))],
            n,
        ]);
    });
});
</script>
Contents