       .on('drag',   @onNodeDragged)
       .on('end',    @onNodeDragEnd)
 
+    svgDrag = d3.drag()
+      .on('start',  @onCanvasDragStart)
+      .on('drag',   @onCanvasDragged)
+      .on('end',    @onCanvasDragEnd)
+
     # Setup SVG
     @svg = d3.select('svg')
-        .attr('width',  @viewport.width)
-        .attr('height', @viewport.height)
-        #.call(d3.behavior.drag()
-        #  .on('drag',       @onCanvasDrag)
-        #  .on('dragstart',  @onCanvasDragStart)
-        #  .on('dragend',    @onCanvasDragEnd))
+      .attr 'width',  @viewport.width
+      .attr 'height', @viewport.height
+      .call svgDrag
 
     # if nodesSize = 1, set nodes size based on its number of relations
     if @parameters.nodesSize == 1


  onNodeDoubleClick: (d) =>
    # unfix the node position when the node is double clicked
    d.fixed = false

  # Tick Function
  onTick: =>

    @rescale()
    d3.event.sourceEvent.stopPropagation()  # silence other listeners

  onCanvasDragEnd: =>
    @svg.style('cursor','default')
    # Skip if viewport has no translation
    if @viewport.dx == 0 and @viewport.dy == 0
      Backbone.trigger 'visualization.node.hideInfo'
      return
    # TODO! Add viewportMove action to history
    @viewport.dx = @viewport.dy = 0;
   
  # Nodes drag events
  onNodeDragStart: (d) =>
    # d3.event.sourceEvent.stopPropagation() # silence other listeners
