 D3.waterfall =
   View: class extends D3ChartView
-    el: 'body'
     initialize: ->
       @key = @model.get 'key'
       @initialize_defaults()

        .append('text')
        .attr('class', 'serie')
        .attr('y', 0)
        .attr('dy', -5)
        .attr('x', (d) => @x(d.key) + @column_width / 2)
        .attr("text-anchor", "middle")
        .text(123)

      $("#{@container_selector()} rect.serie").qtip
        content:

    refresh: =>
      data = @prepare_data()
      # update the scales as needed
      max_value = d3.max(data, (d) -> d.top) * 1.2
      min_value = d3.min(data, (d) -> d.bottom) * 1.1
      min_value = 0 if min_value > 0

      @y.domain([min_value, max_value])

      # animate the y-axis
      @svg.selectAll(".y_axis").transition().call(@y_axis.scale(@y))

      @svg.selectAll('rect.serie')
        .data(data, (d) -> d.key)
        .transition()
        .attr('y', (d) => @y d.top)
        .attr('height', (d) => @y(d.bottom) - @y(d.top))
        .attr('data-tooltip-text', (d) => Metric.autoscale_value d.value, @model.get('unit'))

      @svg.selectAll('text.serie')
        .data(data, (d) -> d.key)
        .transition()
        .attr('y', (d) =>
          if d.value >= 0
            @y(d.top) - 5
          else
            @y(d.bottom) + 10
        )
        .text((d) => +(d.value).toFixed(0))

    # The final label is not defined in the chart attributes, so we must add
