CODEWITHSUNDEEP
javascriptd3.jssvg
Jimmy
Jimmy

Reputation: 12487

D3 - Remove padding to have graph fill the page

I'm a bit stuck trying to remove the padding on this graph. The SVG seems to correctly take up the available space, however the "G" inside the SVG is smaller. What I am after is the "G" inside the SVG to take up the whole body area as well.

I thought it would be simple, for example just setting the below code to 0 instead. However that forces things to be off the page.

// 2. Use the margin convention practice 
var margin = {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
  },

Can anyone help me to get the graph fitting the body height and width please?

http://jsfiddle.net/spadez/wkjx1c38/1/

Upvotes: 2

Views: 1012

Answers (1)

agsigma
agsigma

Reputation: 331

When you set margins to 0 graph is fitting the body height and width. The problem is in axis labels and ticks: 

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(xScale));

You are moving axis under the graph. If I were you I would change margins to minimum value that still allows axes ticks and labels to fit on page. Alternatively you can try to change width and height of the graph based on axes size, but I expect it to be painful and not worth the effort.

So I would just:

margin = {
    top: 10,
    right: 35,
    bottom: 20,
    left: 30
}

There is also another solution - change your axes labels and position them inside graph - then you can change margins to 0 and still have description visible.

Upvotes: 1

Related Questions