How to transfer the Y axis to my D3 graph?

Question

I have this graph:

http://jsfiddle.net/5c4sa6vb/1/

I'm trying to get confused and try to flip the y axis. I need the ticks to start at 0,0 in the lower left corner. I tried messing around with the domain and range, but can not seem to solve my problem: /

var y = d3.scale.linear() .range([0, width-200]); 

Answer 1

Here's the version that works: fiddle

First, switching the order of the elements of the axial region from ([0,whatever]) to ([whatever,0]) will lead to a change in scale.

Secondly, a small mistake. You just used width in the y scale instead of height . Since the graph is not square, it was not the correct length!

Finally, I notice that you have a bunch of additional settings made here and there, subtracting 200, the axisMovement variable, the extra g element around your svg , etc. Thus, it will be easier for you if you clean those parts that are not needed. The goal of setting up fields using your agreement is that these additional settings are not needed. Taking advantage of elegant little tricks such as this is what makes people really connect to d3 :)

Answer 2

The way to return the Y axis in 3D is simple:

change

 var y = d3.scale.linear() .range([0, width-200]); 

for

  var y = d3.scale.linear() .range([width-200 , 0]); 

just change the parameters and it should do the trick!

Demo script