Skip to content

Files

Latest commit

d393410 · Apr 6, 2018

History

History

annotations

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Feb 2, 2018
Feb 2, 2018
Apr 6, 2018
Feb 2, 2018
Feb 2, 2018
Nov 2, 2017

Annotations

SVG plot annotations.

Usage

var Annotations = require( '@stdlib/plot/components/svg/annotations' );

Annotations()

Returns an Annotations instance.

var node = new Annotations();
// returns <Annotations>

Methods

Annotations.prototype.render()

Renders an instance as a Virtual DOM tree.

var node = new Annotations();

var vtree = node.render();
/* e.g., returns
    {
        'tagName': 'g',
        'properties': {
            'property': 'annotations',
            'className': 'annotations',
            'attributes': {
                'transform': 'translate(0,0)'
            },
            'namespace': void 0
        },
        'children': [],
        'namespace': 'http://www.w3.org/2000/svg',
        'count': 0,
        'hasWidgets': false,
        'hasThunks': false,
        'descendantHooks': false,
        'hooks': void 0,
        'key': void 0
    }
*/

Events

'render'

Event emitted when an instance renders. The event object is the rendered Virtual DOM tree.

var node = new Annotations();

function onRender( vtree ) {
    console.log( vtree );
}

node.on( 'render', onRender );
node.render();

Listeners

'change'

Upon receiving a 'change' event, an instance re-renders.

var node = new Annotations();

function onRender( vtree ) {
    console.log( vtree );
}

node.on( 'render', onRender );
node.emit( 'change' );

Examples

var toHTML = require( 'vdom-to-html' );
var annotations = require( '@stdlib/plot/components/svg/annotations' );

// Create a new component:
var node = annotations();

// Render as a virtual DOM tree:
var vtree = node.render();

// Transform the virtual DOM tree to HTML:
var html = toHTML( vtree );
// returns <g property="annotations" class="annotations" transform="translate(0,0)"></g>