Elements

API

Element Creation

#.createEl(Props):

createEl() creates element of specified 'el' type with 'attr' attributes and 'style' properties. Please refer to the components for context based support.

Takes Props as an input and returns Element instance.

   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

#.createEls(dataArray, Props)

Creates elements, each for one data object, does not perform any join. Takes the Config object, values can be access function which receives data object as argument, index and returns Elements instance.

   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 one node from parent. It takes simple CSS-selector as a input and returns Element instance. It also accepts data as an optional param. If specified, the element bound with the same data object will be retrieved.

   var node = renderer.fetchEl(selector)

#.fetchEls(selector[,dataArray])

Fetches nodes from parent. It takes simple CSS-selector as a input and returns Elements instance. It also accepts dataArray as an optional param. If specified, elements bound with dataArray will be retrieved.

   var nodes = renderer.fetchEl(selector)

#.setAttr()

Sets attribute to the element. It takes either single key,value or an object with multiple key-value pairs.

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

#.setStyle()

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

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

#.getAttr()

To fetch DOM 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);

#.on(eventType,eventHndlr)

To attach event handlers on elements. More details on

             element.on('click',function(data, event){ // if no data binded, 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).

   var node = element.node()

#.remove()

Api to remove current element from the parent element.

       element.remove()

#.removeChild()

Api to remove child from the parent element. Takes node instance as an argument.

       element.removeChild(elementChildInstance)

Objects

Element

Element Instance is a virtual representation of a single vDom node. It is an API interface to interact with the VDom node. Element Instance has the following methodes defined.

• createEl
• createEls
• setAttr
• setStyle
• fetchEl
• fetchEls
• join
• on
• animateTo
• node // to access dom
• remove
• removeChild
• getAttr
• getStyle
• translate
• rotate
• scale

Elements

Elements Instance is a virtual representation of a collection of one or more vDom nodes. It is an API interface to interact with VDom nodes collection. In addition to Element Instance methods, the below methods are defined.

• forEach

Props

Below is the sample config object for creating Element.

                {
                  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'
                  }
              }

Selector

I2D supports simple css sectors.

eg..: .className, #Id, elementName