   render: ->
     console.log 'render canvas'
     @updateRelations()
-    @updateRelationsLabels()
+    #@updateRelationsLabels()
     @updateNodes()
     @updateNodesLabels()
     @updateForce()
 
   updateNodes: ->
-    # Use General Update Pattern I (https://bl.ocks.org/mbostock/3808218)
-
-    # DATA JOIN
+    # Use General Update Pattern 4.0 (https://bl.ocks.org/mbostock/a8a5baa4c4a470cda598)
+
+    # JOIN new data with old elements
     @nodes = @nodes_cont.selectAll('.node').data(@data_nodes)
 
-    # ENTER
+    console.log 'nodes after join', @nodes
+
+    # EXIT old elements not present in new data
+    @nodes.exit().remove()
+
+    # UPDATE old elements present in new data
+    #@nodes
+      #.attr('id', (d) -> return 'node-'+d.id)
+      #.attr 'class',    (d) -> console.log('node update', d); return if d.disabled then 'node disabled' else 'node'
+      # update node size
+      #.attr  'r',       @getNodeSize
+      # set nodes color based on parameters.nodesColor value or image as pattern if defined
+      #.style 'fill',    @getNodeFill
+      #.style 'stroke',  @getNodeColor
+
+    # ENTER new elements present in new data.
     @nodes.enter().append('circle')
+      .attr  'id',      (d) -> return 'node-'+d.id
+      .attr  'class',   (d) -> console.log('node enter', d); return if d.disabled then 'node disabled' else 'node'
+      # update node size
+      .attr  'r',       @getNodeSize
+      # set position at viewport center
+      #.attr  'cx',      @viewport.center.x
+      #.attr  'cy',      @viewport.center.y
+      # set nodes color based on parameters.nodesColor value or image as pattern if defined
+      .style 'fill',    @getNodeFill
+      .style 'stroke',  @getNodeColor
       # .on   'mouseover',  @onNodeOver
       # .on   'mouseout',   @onNodeOut
       # .on   'click',      @onNodeClick
       # .on   'dblclick',   @onNodeDoubleClick
-      # .call @forceDrag
-
-    # ENTER + UPDATE
-    @nodes.attr('id', (d) -> return 'node-'+d.id)
-      .attr 'class',    (d) -> return if d.disabled then 'node disabled' else 'node'
-      # update node size
-      .attr  'r',       @getNodeSize
-      # set nodes color based on parameters.nodesColor value or image as pattern if defined
-      .style 'fill',    @getNodeFill
-      .style 'stroke',  @getNodeColor
-      
-    # EXIT
-    @nodes.exit().remove()
+      .call @forceDrag
+
+    @nodes = @nodes_cont.selectAll('.node')
+
+    console.log 'nodes after enter', @nodes
 
   updateRelations: ->
-    # Use General Update Pattern I (https://bl.ocks.org/mbostock/3808218)
-
-    # DATA JOIN
+    # Use General Update Pattern 4.0 (https://bl.ocks.org/mbostock/a8a5baa4c4a470cda598)
+
+    # JOIN new data with old elements
     @relations = @relations_cont.selectAll('.relation').data(@data_relations_visibles)
 
-    # ENTER
+    # EXIT old elements not present in new data
+    @relations.exit().remove()
+
+    # UPDATE old elements present in new data
+    @relations
+      .attr('id', (d) -> return 'relation-'+d.id)
+      .attr 'class',        (d) -> return if d.disabled then 'relation disabled' else 'relation'
+      #.attr 'marker-end',   @getRelationMarkerEnd
+      #.attr 'marker-start', @getRelationMarkerStart
+
+    # ENTER new elements present in new data.
     @relations.enter().append('path')
-
-    # ENTER + UPDATE
-    @relations.attr('id', (d) -> return 'relation-'+d.id)
+      .attr('id', (d) -> return 'relation-'+d.id)
       .attr 'class',        (d) -> return if d.disabled then 'relation disabled' else 'relation'
-      .attr 'marker-end',   @getRelationMarkerEnd
-      .attr 'marker-start', @getRelationMarkerStart
-
-    # EXIT
-    @relations.exit().remove()
+
+    @relations = @relations_cont.selectAll('.relation')
+
 
   updateNodesLabels: ->
     # Use General Update Pattern I (https://bl.ocks.org/mbostock/3808218)
 
     # DATA JOIN
-    @nodes_labels = @nodes_labels_cont.selectAll('.node-label').data(@data_nodes)
-
-    # ENTER
-    @nodes_labels.enter().append('text')
-      .attr 'id',     (d,i) -> return 'node-label-'+d.id
-      .attr 'dx',     0
-      .attr 'dy',     @getNodeLabelYPos
-
-    # ENTER + UPDATE
-    @nodes_labels
-      .attr 'class', @getNodeLabelClass
-      .text (d) -> return d.name
-      .call @formatNodesLabels
-
-    # EXIT
-    @nodes_labels.exit().remove()
+    # @nodes_labels = @nodes_labels_cont.selectAll('.node-label').data(@data_nodes)
+
+    # # ENTER
+    # @nodes_labels.enter().append('text')
+    #   .attr 'id',     (d,i) -> return 'node-label-'+d.id
+    #   .attr 'dx',     0
+    #   .attr 'dy',     @getNodeLabelYPos
+
+    # # ENTER + UPDATE
+    # @nodes_labels
+    #   .attr 'class', @getNodeLabelClass
+    #   .text (d) -> return d.name
+    #   .call @formatNodesLabels
+
+    # # EXIT
+    # @nodes_labels.exit().remove()
 
   updateRelationsLabels: ->
     # Use General Update Pattern I (https://bl.ocks.org/mbostock/3808218)
 
     # DATA JOIN
-    @relations_labels = @relations_labels_cont.selectAll('.relation-label').data(@data_relations_visibles)
-
-    # ENTER
-    @relations_labels.enter()
-      .append('text')
-        .attr('id', (d) -> return 'relation-label-'+d.id)
-        .attr('class', 'relation-label')
-        .attr('x', 0)
-        .attr('dy', -4)
-      .append('textPath')
-        .attr('xlink:href',(d) -> return '#relation-'+d.id) # link textPath to label relation
-        .style('text-anchor', 'middle')
-        .attr('startOffset', '50%') 
-        #.text((d) -> return d.relation_type)
-
-    # ENTER + UPDATE
-    @relations_labels.selectAll('textPath').text((d) -> return d.relation_type)
-
-    # EXIT
-    @relations_labels.exit().remove()
+    # @relations_labels = @relations_labels_cont.selectAll('.relation-label').data(@data_relations_visibles)
+
+    # # ENTER
+    # @relations_labels.enter()
+    #   .append('text')
+    #     .attr('id', (d) -> return 'relation-label-'+d.id)
+    #     .attr('class', 'relation-label')
+    #     .attr('x', 0)
+    #     .attr('dy', -4)
+    #   .append('textPath')
+    #     .attr('xlink:href',(d) -> return '#relation-'+d.id) # link textPath to label relation
+    #     .style('text-anchor', 'middle')
+    #     .attr('startOffset', '50%') 
+    #     #.text((d) -> return d.relation_type)
+
+    # # ENTER + UPDATE
+    # @relations_labels.selectAll('textPath').text((d) -> return d.relation_type)
+
+    # # EXIT
+    # @relations_labels.exit().remove()
 
   updateForce: ->
-    @force
-      .nodes(@data_nodes)
-      .links(@data_relations_visibles)
-      .start()
+    @force.nodes(@data_nodes)
+    @force.force('link').links(@data_relations_visibles)
+    @force.restart()
+    
+    # @force
+    #   .nodes(@data_nodes)
+    #   .links(@data_relations_visibles)
+    #   .start()
 
 
   # Nodes / Relations methods


  # Tick Function
  onTick: =>
    # Set relations path & arrow markers
    @relations
      .attr('d', @drawRelationPath)
      #.attr('marker-end', @getRelationMarkerEnd)
      #.attr('marker-start', @getRelationMarkerStart)
    # Set nodes & labels position
    @nodes.attr('transform', (d) -> return 'translate(' + d.x + ',' + d.y + ')')
    @nodes_labels.attr('transform', (d) -> return 'translate(' + d.x + ',' + d.y + ')')
  
  drawRelationPath: (d) =>
  

  # Auxiliar Methods
  # ----------------

    @svg.attr   'height', @viewport.height
    @rescale()
    # Update force size
    #@force.size [@viewport.width, @viewport.height]

  rescale: ->
    @container.attr 'transform', @getContainerTransform()
