I guess the title explains the problem. Similar questions on SO refer to ordinal scales.
x axis scale:
var x = d3.time.scale()
.domain(d3.extent(data, function(d) {
return d.date;
}))
.range([width/data.length/2, width-(width/data.length/2)]);
The bars
bars.enter()
.append("rect")
.classed("column", true)
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.attr("width", (width-(width/data.length)) / (data.length+2))
.attr("x", function(d) { return x(d.date) - (width/data.length)/2; })
.attr("y", height)
.attr("height", 0)
.transition().duration(1000)
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value);});
How can I amend this code so that I have a whole and equal number of pixels between each vertical bar, and thereby getting an even spacing ?