               .append("svg")
               .attr("width", @width)
               .attr("height", @height)
-              .attr('viewBox',"0 0 #{@width} #{@height}")
-              .attr('preserveAspectRatio', 'xMidYMid')
               .style("overflow", "scroll")
               .append('g')
               .attr("class","drawarea")
-              .attr('transform', 'translate(0,10)')
+              .attr("transform", "translate(#{@width / 2},-30)")
     d3.select('svg').call @zoom
 
 

    @rootNeuron = neurons.filter((neuron) ->
      neuron.id == response.meta.root_id
    )[0]

    @neuron_parents = { "no_parent":[] }


    @drawLinks()
    @drawNeurons()
    @drawWithoutParent()

  update: (source) ->
    self = this
    duration = if d3.event and d3.event.altKey then 5000 else 500
    # Compute the new tree layout.
    nodes = @tree.nodes(@rootNeuron).reverse()
    # Normalize for fixed-depth.
    nodes.forEach (d) ->
      d.y = d.depth * 50
      return
    # Update the nodes…
    node = @svg.selectAll('g.node').data(nodes, (d) ->
      d.id or (d.id = ++i)
    )
    # Enter any new nodes at the parent's previous position.
    nodeEnter = node.enter().append('svg:g').attr('class', 'node').attr('transform', (d) ->
      'translate(' + source.y0 + ',' + source.x0 + ')'
    ).on('click', (d) =>
      @toggleNode d
      @update d
      return
    )
    nodeEnter.append('svg:circle').attr('r', 4)
                                  .style('stroke', (d) ->
                                    if d.deleted then "#ec5747")
                                  .style('fill', (d) ->
                                    if d._children then "lightsteelblue" else "#fff")


    nodeEnter.append('svg:text').attr('dy', -5).attr('text-anchor', 'middle').text((d) ->
      d.title
    ).on("mouseenter", (node) ->
      self.showDetails(node, this)
      )

    # Transition nodes to their new position.
    nodeUpdate = node.transition().duration(duration).attr('transform', (d) =>
      'translate(' + d.x + ',' + (@height - (d.y)) + ')'
    )
    nodeUpdate.select('circle').attr('r', 4)
                               .style('stroke', (d) ->
                                 if d.deleted then "#ec5747")
                               .style('fill', (d) ->
                                 if d._children then "lightsteelblue" else "#fff")

    nodeUpdate.select('text').style('fill-opacity', 1)

    # Transition exiting nodes to the parent's new position.
    nodeExit = node.exit().transition().duration(duration).attr('transform', (d) ->
      'translate(' + source.y + ',' + source.x + ')'
    ).remove()
    nodeExit.select('circle').attr 'r', 4
    nodeExit.select('text').style 'fill-opacity', 1e-6
    # Update the links…
    link = @svg.selectAll('path.link').data(@tree.links(nodes), (d) ->
      d.target.id
    )
    # Enter any new links at the parent's previous position.
    link.enter().insert('svg:path', 'g').attr('class', 'link').attr('d', (d) =>
      o =
        x: source.x0
        y: source.y0
      @diagonal
        source: o
        target: o
    ).transition().duration(duration).attr 'd', @diagonal
    # Transition links to their new position.
    link.transition().duration(duration).attr 'd', @diagonal
    # Transition exiting nodes to the parent's new position.
    link.exit().transition().duration(duration).attr('d', (d) =>
      o =
        x: source.x
        y: source.y
      @diagonal
        source: o
        target: o
    ).remove()
    # Stash the old positions for transition.
    nodes.forEach (d) ->
      d.x0 = d.x
      d.y0 = d.y
      return
    d3.select('svg').call d3.behavior.zoom().scaleExtent([
      0.5
      5
    ]).on('zoom', zoom)
    if source.name == 'root'
      d3.select('.drawarea').attr 'transform', 'translate(' + 380 + ',' + -20 + ')'
    return

  showDetails: (neuron, text) ->
    new moiTree.TreeDialog(neuron, text, @rootNeuron)
