D3 - Issues On First Transition After Initialization

I have created this jsbin http://jsbin.com/ibewux/3/edit to show a strange behavior on transitions. When the chart is initialized, it correctly displays the data (see the table bel

Solution 1:

When isVerticalChart is true, you are using an ordinal scale with domain svg.pointsNames (which seems to be an array of strings of the form "Col " + i):

x = d3.scale.ordinal().domain(svg.pointsNames);

However, you then go on to use the datum index with this scale, instead of these strings:

.attr("x", function(d, i) { return isVerticalChart ? x(i) : x(d.y0 - d.size); })

I think you should be passing a string from the domain to the scale here to avoid the strange behaviour you're seeing.

It only works at the moment because if you pass a key to an ordinal scale that hasn't been seen before, it will add it to the domain.

There may be other issues, but hopefully that gets you closer.