D3 - issues on first transition after initialization

Question

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 below it).

If I try to change the chart type through the dropdown menu, some series are swapped; after this happens, the series are not swapped anymore.

Same thing happens if you click on updateChartData button; first time it will swap the series compared to the data displayed in the table.

So it seems that only the first transition after initialization is subject to this unwanted swap.

It's a short piece of code and wonder if you can spot the reason why this happens.

Thanks

Answer 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.