How to get the dimensions of window or document?

Ryan Ewen

unread,

Nov 17, 2011, 3:13:09 PM11/17/11

to d3...@googlegroups.com

Hi guys,

I am working on a project where I only have access to Mochikit and (thankfully) d3.js but I am a jQuery person. I want to get the height of the window (or document) but I can't seem to figure it out.

I can get away with selections like d3.select('body').style('height'); for specific elements, but how do I go about getting the height of window, and how would I get it as an integer instead of the string as evaluated in CSS?

As I mentioned I have access to Mochikit, and it has some functions for doing this, but.. I would really much rather stick to d3.js.

Bob Monteverde

unread,

Nov 17, 2011, 4:03:15 PM11/17/11

to d3-js

Not the answer, but some helpful advice... you can turn "100px" into
the int 100 by using parseInt....

parseInt("100px") === 100

Ryan Ewen

unread,

Nov 17, 2011, 4:07:59 PM11/17/11

to d3...@googlegroups.com

Thanks Bob,

I was aware of that but I still have to manually account for margin, padding, borders, etc. I would basically be writing my own function. I was hoping there was already one built in for this type of thing, but I'm guessing there isn't (which is still fine).

I'm more concerned with getting the window height. I used to do it in jQuery all the time. Right now as a workaround I'm using the <body> height, but that can flaky in certain scenarios.

Bob Monteverde

unread,

Nov 17, 2011, 4:25:01 PM11/17/11

to d3-js

Well, there are pure JavaScript (no library) methods.. but I believe
they are dependent on browser. Google found a few good tutorials on
this for me. Obviously an extremely common task. But yes, this may
be more manual than you want. I have 0 experience with Michikit, and
I'm pretty sure D3 does not have the ability to do this with the
window.

Good luck

Ryan Ewen

unread,

Nov 17, 2011, 4:44:10 PM11/17/11

to d3...@googlegroups.com

Oh well. Mochikit it is for now I guess!

Thanks for your input.

Mike Bostock

unread,

Nov 17, 2011, 6:45:07 PM11/17/11

to d3...@googlegroups.com

Try window.innerWidth and window.innerHeight.

(You can also use document.documentElement.clientWidth and
document.documentElement.clientHeight.)

Mike

Ryan Ewen

unread,

Nov 18, 2011, 9:17:30 AM11/18/11

to d3...@googlegroups.com

Well that's pretty simple, I didn't realize it was right there to get!

Seems I was spoiled by jQuery. I guess I should've realized that various toolkits may have functions for this not because they're difficult to do otherwise, but perhaps just to allow conformity with their syntax. Therefore if something is missing, it was probably already easy to do.

Thanks guys.

Reply all

Reply to author

Forward