Element 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

#.createEls(dataArray, ElementConfig)

CreateEls can be used to create multiple elements based on the data array. The first argument it accepts is the data array and the second is the element configuration. It creates elements for every data value, and property values can be an access function that 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])

This function retrieves a single child node using a CSS selector. Additionally, it can also take in a data object as a second argument, which is optional, to retrieve the child node based on the bound data. The function uses a CSS selector to find the desired child node and returns an Element instance.

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

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

#.fetchEls(selector[,dataArray])

Use fetchEls method to retrieve multiple child nodes based on a CSS selector. This method also supports an optional "data" argument, allowing you to retrieve elements based on bound data. Simply pass a CSS selector as the first argument and the data array as the second argument, if needed, to retrieve an instance of multiple elements that match the selector.

var nodes = renderer.fetchEl(selector)

#.setAttr(key, value);

Set attribute value. It takes either a single key, value pair, or an object with multiple key/value pair as an argument. The Value of a property can be a function. Send 'null' as value, to delete the property from the element.

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);

#.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)