barchart on filter, first bar not disappearing correctly, animation wrong.

I’ve been searching a lot in dc.js-related SO questions and github issues, but can’t find an answer to this problem. I have the following barChart in my project. It’s a pretty standard definition. In the following gif you can see what happens: http://imgur.com/a/ggnm4

When I filter data in another chart, the bars are moving and readjusting correctly, but the first bar of the chart only disappears when the animation is done. I have no idea how to solve this.

Chart definition is currently this:

chart
  .margins(this.margin)
  .width(this.width)
  .height(this.height)
  .group(fakeGroup)
  .dimension(dimension)
  .x(d3.scale.ordinal())
  .xUnits(dc.units.ordinal)
  .y(d3.scale.log().domain([minimum, this.getMax(yValue)])
    .range(this.height, 0)
    .nice()
    .clamp(true)
  )
  .xAxisLabel(this.xAxisLabel)
  .yAxisLabel(this.yAxisLabel)
  .elasticX(true)
  .title((d) => {return d.key + ': ' + d.value;})
  .ordinalColors(this.color)
  .on('renderlet', (chart) => {
    chart.selectAll('g.x text')
      .attr('dx', '-10')
      .attr('transform', 'rotate(-55)');
  })
  .on('filtered', (chart) => {
  });

chart.ordering((d) => -d.value);
chart.yAxis().ticks(15, ",d").tickSize(5, 10);

window.addEventListener("resize", () => {
  this.calculateSize();
  chart.width(this.width);
  chart.height(this.height);
  chart.transitionDuration(0);
  chart.rescale();
  chart.redraw();
  chart.transitionDuration(750);
});

Edit: I also can’t seem to figure out, how I can get the yAxis to rescale on filter, so it gets down or upscaled on filter events. Any help with that?

[gordonwoodhull]

Yeah, there are a lot of problems with the animated transitions.

Rather than attempt to diagnose the particular problem you’re facing here, can I ask you to try out one of the feature branches which will go into dc.js 2.1?

I’ve set up a temporary branch bar-transitions: https://github.com/dc-js/dc.js/tree/bar-transitions

Or if you want a direct http link, you can use this: https://rawgit.com/dc-js/dc.js/bar-transitions/dc.js

The big difference is key-based joins. But there are many other refinements to the transitions as well.

[akuji1993]

Yeah I’m using DC within a ES6 app that uses webpack and node. It’s working alright right now, but I can’t switch to other branches (as far as I know) and it’s for a client so it needs to be perfectly stable. Next month sounds good, I just ask so I can give my client a (rough) timeline about the issue. They’re using it only for company stuff only so it’s not that important that it works perfectly right away.