in d3js bar chart i want to have fixed bar width

Question

http://bl.ocks.org/d3noob/8952219

I want to have bar size width to be fixed..

from above example i have changed the code from

 svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

to

svg.selectAll("bar")
      .data(data)
    .enter().append("rect")
      .style("fill", "steelblue")
      .attr("x", function(d) { return x(d.date); })
      .attr("width", 50)
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); });

but the labels are not moving to proper place also bars are getting overlapped

Answer 1

You have to change the range() of your x scale, to fit with your bar width value:

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

to (if you want 50px as bar width)

var x = d3.scale.ordinal().range([0, data.length * 50]);

The range() method is used to define the display space for your scale.