D3 ordinal scale adding numbers to the end - d3.js

Question

I am creating an ordinal scale like so:
var x = d3.scale.ordinal()
.domain(["b1", "b2", "b3", "b4", "b5"])
.rangeBands([0, width], .1);
If I use this scale with an axis:
var xaxis = d3.svg.axis()
.scale(x)
.orient("bottom");
svg.append("g")
.attr("class", "axis")
.call(xaxis)
.attr("transform", "translate(" + 0 + "," + height + ")");
I find that when the axis is rendered in a bar chart with 5 bars, it tacks on numbers at the end. So I get:
b1,b2,b3,b4,b5,0,1,2,3,4.
Also the bars are not aligned to the ticks.
How do I make the axis behave so that I get b1,b2,b3,b4,b5 under the 5 bars ?
Here's the entire function:
function barchart_2d_array(width, height, barwidth, data, target_div){
var margin = {top: 20, right: 20, bottom: 30, left: 40},
w = width + margin.left + margin.right,
h = height + margin.top + margin.bottom;
var dataset = data;
values_arr=[];
for(var o in dataset){
values_arr.push(dataset[o]);
}
var x = d3.scale.ordinal()
.rangeBands([0, width], .1);
var y = d3.scale.linear()
.domain([0,d3.max(values_arr)])
.range([height,0]);
var svg = d3.select(target_div)
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("style","border : 1px solid black")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(["b1", "b2", "b3", "b4", "b5"]);
window.x=x;
window.width=width;
svg.selectAll("rect")
.data(values_arr)
.enter()
.append("rect")
.attr("x",function(d,i){
return x(i);
})
.attr("y",function(d,i){
return y(d);
})
.attr("width",barwidth)
.attr("height",function(d,i){
return height - y(d);
});
var yaxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var xaxis = d3.svg.axis()
.scale(x)
.orient("bottom");
svg.append("g")
.attr("class", "axis")
.call(yaxis);
svg.append("g")
.attr("class", "axis")
.call(xaxis)
.attr("transform", "translate(" + 0 + "," + height + ")");
};
This is how I call it:
<div id="bar_chart">
</div>
<script>
var dataset = { "b1":100, "b2":200, "b3":300, "b4":400, "b5":500 };
a = barchart_2d_array(400,200, 5,dataset,"#bar_chart");
</script>

Answer 1

D3's ordinal scales will implicitly add values into the domain if they haven't been seen before. Your code is passing in the additional values you're seeing in this function:
.attr("x",function(d,i){
return x(i);
})
i is the index of the node in the selection starting at 0.
You should take another look at the data set you're binding because I don't think it's doing what you want. You turn the data object into an array but in the process you're dropping the property names. Your array just contains the values ([100, 200, 300, 400, 500]), not the bar names that the x scale is expecting.
You probably want your array to look more like [{name: b1, value: 100}, {name: b2, value: 200}...] and then you can scale the data for x and y like this:
.attr("x",function(d) {
return x(d.name);
})
.attr("y",function(d) {
return y(d.value);
})
Once you get the shape of the bound data right everything else should fall into place.