Dimple.js bar chart transitions including removed bars

Question

When transitioning to new data that has less or different bars in a dimple bar chart the bars that are removed are pushed on top of each other to the left of the chart and stay for the whole transition time.

Here is an example of code that recreates the effect:

var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
    { Animal: "Cats", Value: (Math.random() * 1000000) },
    { Animal: "Dogs", Value: (Math.random() * 1000000) },
    { Animal: "Mice", Value: (Math.random() * 1000000) },
    { Animal: "Rat", Value: (Math.random() * 1000000) },
    { Animal: "Cow", Value: (Math.random() * 1000000) }
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Animal");
x.addOrderRule(["Cats", "Dogs", "Mice"]);
myChart.addMeasureAxis("y", "Value");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();

d3.select("#btn").on("click", function() {
   myChart.data = [
     { Animal: "Cats", Value: (Math.random() * 1000000) },
     { Animal: "Dogs", Value: (Math.random() * 1000000) },
     { Animal: "Mice", Value: (Math.random() * 1000000) }
   ];
   myChart.draw(1000);
});

If you click on the button in the example you will see the effect. Example: http://jsfiddle.net/nf57j/25/

(dimple adapted from John Kiernander's answer here: Update dimple.js chart when select a new option)

Is there a way to keep the removed bars out of the transition?

Answer 1

I've rewritten all the transition code for Dimple v2.0 which I'll be releasing on Monday. I've just tried this example in version 2 and it looks a lot better.