Elements API

Element Creation

#.createEl(ElementConfig):

createEl takes Element config as an input which contains element 'el' type with 'attr' attributes and 'style' properties.

   var node = renderer.createEl({
                  el:'rect',
                  attr:{
                      height:100,
                      width:100,
                      x:0,
                      y:0
                  },
                  style:{
                    fill:'red' //if its Canvas renderer, then it will be canvas style attr 'fillStyle'
                  },
                  bbox: Boolean // Canvas API special property, to turn ON/OFF bounding box computations
              })

Examples:

• Canvas Shapes

• SVG Shapes

• WebGL Shapes -- update this example

#.createEls(dataArray, ElementConfig)

CreateEls can be used to create more than one element, based on the data array. It accepts data array as a first argument and Element config as a second element. It creates elements for every data value. property values can be an access function, which receives data as an argument.

var data = [1,2,3]
var node = renderer.createEls(data, {
                  el:'rect',
                  attr:{
                      height:100,
                      width:100,
                      x: function(d,i){ return d*100 },
                      y: function(d,i){ return d*100 }
                  },
                  style:{
                    fill:'red' //if its Canvas renderer, then it will be canvas style attr 'fillStyle'
                  }
              });

#.fetchEl(selector[,dataObject])

Fetches single child node for a given CSS selector. It also accepts data object as a second argument, optional param, to fetch based on bound data. It takes a simple CSS-selector as an input and returns Element instance.

var node = renderer.fetchEl(selector, dataValue[optional])

CSS Selectors: 
eg..: .className, #Id, elementName

#.fetchEls(selector[,dataArray])

Fetches multiple children for a given CSS selector. It also accepts data array as a second argument, optional param, to fetch based on bound data. It takes a simple CSS-selector as an input and returns Elements instance.

var nodes = renderer.fetchEl(selector)

#.setAttr(key, value);

Set attributes. It takes either a single key, value pair, or an object as an argument. The Value of a property can be a function. if you send 'null' as

var nodes = element.setAttr(key,value);

#.setStyle()

Set style properties to the element. It takes either a single key, value pair , or an object with multiple key-value pairs.

var nodes = element.setStyle(key,value);

#.getAttr()

To fetch attribute value. It takes attribute name input, gives value as an output.

var value = element.getAttr(key);

#.getStyle()

To fetch DOM style value. It takes style property input, gives value as an output.

var value = element.getStyle(key);

#.animateTo()

To perform animation transitions of one or more elements from the current state to the target state in a given duration(ms).

circleNode.animateTo({
    duration: 500,
    loop: Infinity,
    ease: 'easeInOutSin',
    direction: 'alternate',
    attr: {
        r: 200
    },
    style: {
        fillStyle: '#00ff00'
    }
});

#.interrupt()

To interrupt transitions on the context node. By calling the interrupt it kills all the transitions on the node.

circleNode.interrupt();

#.on(eventType, eventHndlr)

To bind event handlers on the graphical element. Accepts eventType and eventHandler as arguments. The handler receives the event object as an argument.

element.on('click',function(event){ // if no data bound, then only event object.
    this; // this refers to the element context.
});

#.node()

API to fetch Dom node. Returns Dom object(SVG) and VDom node(Canvas/WebGL).

   var node = element.node()

#.data()

API to fetch/set data bound to the graphical node.

   var node = element.data()

#.remove()

API to remove the current element from the parent element. Node on which remove invoked will be removed from the parent's children list

       element.remove()

#.removeChild(childNode)

API to remove the child from its child's list. Takes node instance as an argument.

       element.removeChild(elementChildInstance)