Center d3.js JavaScript Plot

Question

I am working on a plot that is using the code from the example here:

http://bl.ocks.org/mbostock/3887118

I am new to HTML, CSS, and JS, but know some of the basics. I was wondering how I can center the plot in the browser's window, specifically what to put into the example code provided. Thanks for the help!

score 4 · Accepted Answer · answered Oct 11 '13 at 23:57

4

You can set margins left and right to auto, but you also need to make the element display as block-level.

svg {
    display: block;
    margin: 0 auto;
}

answered Oct 11 '13 at 23:57

Josh KG

5,050
3
20
24

This is better, but do you know how to center it vertically as well? – rfoley Oct 12 '13 at 00:34
See e.g. [this question](http://stackoverflow.com/questions/8811427/trying-to-center-div-horizontally-and-vertically-in-screen). – Lars Kotthoff Oct 12 '13 at 09:19

score 0 · Answer 2 · answered Oct 11 '13 at 22:33

0

.plot
{
    margin: 0 auto;
}

that will center it relatively in most browsers.

answered Oct 11 '13 at 22:33

Chris Peterson

713
7
13

Didn't seem to work. Maybe it is conflicting with the margin variable? – rfoley Oct 11 '13 at 23:35
Sorry can't account for everything with your particular build. – Chris Peterson Oct 12 '13 at 00:45

Center d3.js JavaScript Plot

2 Answers2