D3 bar chart with autosize

Question

Good afternoon.

I need to automatic update the size of the chart. My code is above. My data is something like this, when the data is small i do not have problem but when it is big the values in xAxis and the bars are overlapping.

var data = [
  {key:1, value:5},
  {key:2, value:10},
  {key:3, value:15},
  {key:4, value:26},
  {key:5, value:33}
];

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

width = 900 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

 var x = d3.scale.ordinal()
  .domain(data.map(function(d) {
    return d.key;
}))
.rangeRoundBands([margin.left, width], 0.05);

var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) {
    return d.value;
})])
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var key = function(d) {
return d.key;
 };

 var svg = d3.select("#chart").append("svg")
 .attr("width", width + margin.left + margin.right + 10)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .text("Your tooltip info")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Log(number sts) vs Nodes  - Gen" + " " + startGen +  " "+"to" + " "+ endGen)

 svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(-30," + height + ")")
.call(xAxis)
.append("text")
.attr("x", width)
.attr("dy", 30)
.attr("text-anchor", "end")
.text("Number of nodes");

 svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -30)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Log(Number Sts)");



var bars = svg.selectAll("rect")
 .data(data, key)
 .enter().append("rect")
 .attr("x", function(d) {
    return x(d.key) + x.rangeBand() / 2 - 40;
  })
 .attr("y", function(d) {
    return y(d.value);
  })
  .attr("width", 20)
  .attr("height", function(d) {
    return height - y(d.value);
  })
 .style("fill", "blue");

Answer 1

If you want to size the chart according to how much data you have then you can simply replace your "width" variable with a calculation: something like:

width = Math.min(900, 20 * data.length);

But perhaps what you mean is to size the bars based on how much room there is? You are already using x.rangeBand that gives you the available range width - try using that for the bar width

...
.attr("width", x.rangeBand())

If you want to get fancy you can have finer control over the bar width and gap. Something like:

var barWidth = Math.max(1, 0.9 * x.rangeBand());
var halfGap = Math.max(0, x.rangeBand() - barWidth) / 2;

var bars = svg.selectAll("rect")
  .data(data, key)
  .enter().append("rect")
  .attr("x", function(d) {
    return x(d.key) + halfGap - 30 ;
  })
  .attr("width", barWidth)
  ...

You can try the fiddle here