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

[akuji1993]

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]

Thanks, I'll try out the temp branch today and tell you if it helped! Good to see it added to 2.1, if I come up with anything myself, I'll let you know.

[akuji1993]

Gordon you are a god, it works perfectly. You can see the transition in the new branch in this gif:
https://gfycat.com/KindlyLastCowbird

It works perfectly. Sadly I can't use dc.js with this branch in my project. Can you give a (can be very conservative) time when this will hit the main branch that's hosted on npm?

Thank you very much for your help, hope I could contribute a bit, with this report. New transition looks awesome.

Edit: Conversion from .mov to .gif sucks apparently, but you can see what I mean.

[gordonwoodhull]

So you need to use dc.js from npm? I hope to merge this in the next month, time permitting. (But of course I never really know what time will permit.)

The main reason it hasn't already been merged is that for the longest time I thought it was possible to add to 2.0. But it definitely changes the behavior and CSS classes in subtle ways.

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