Change axis displayed value in D3

Question

I would like to change the value of the y-axis in my graph, such as, instead of displaying [0,18], it displays [-18,0].

My initial code for the axis is:

        var y = d3.scale.linear().range([height, 0]);

        var yAxis = d3.svg.axis()
                  .scale(y)
                  .orient("left");

and I tried to modify it like this:

        var yAxisInv = d3.svg.axis()
                  .scale(y)
                  .orient("left")
                  .ticks(10)
                  .tickValues([-18, -16, -14, -12, -10, -8, -6, -4, -2, 0]);  

but it just moves down the whole axis. What I would like to do is change the displayed values without changing the data

In images, it looks like this:

Answer 1

You can use the tickFormat function to define how you want the individual ticks to appear.

I think something like the following would work:

    var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left");
              .tickFormat(function(d) {
                  return -18+d;
              })