CODEWITHSUNDEEP
javascriptd3.jssvgaxis
thatOneGuy
thatOneGuy

Reputation: 10612

How to flip the Y axis on my D3 graph?

I have this graph :

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

Ive been trying to mess about with it and try flip the y axis. What i need is for the ticks to start at 0,0 at the bottom left. I have tried messing with the domain and range but cant seem to solve my problem :/

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

Upvotes: 8

Views: 16474

Answers (2)

user3241019
user3241019

Reputation: 811

The way to reverse 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 swap the parameters and it should do the trick !

Demo Fiddle

Upvotes: 2

Dick Fox
Dick Fox

Reputation: 2994

Here's a version that works: fiddle

First, switching the order of the axis domain elements from ([0,whatever]) to ([whatever,0]) will reverse the scale.

Second, a small mistake. You simply were using width in your y scale instead of height. So since the graph isn't square, it wasn't the right length!

Finally, I notice that you have a bunch of extra adjustments tucked in here and there, subtracting 200, the axisMovement variable, an extra g element around your svg, etc. So you'll have an easier time if you clean out those parts that are not needed. The purpose of setting up the margins using the convention that you did is so that these extra tweaks are unnecessary. Taking advantage of elegant little tricks like these is what gets people really hooked on d3 :)

Upvotes: 21

Related Questions