Help on rescaling logarithmic yAxis on filter

[akuji1993]

I have a problem with rescaling my yAxis after filtering on another chart. Here's my code:

var chart = dc.barChart(this.hook);

let xValue = this.xValue;
let yValue = this.yValue;
var ndx = this.chartGroup.getCrossfilter();

var dimension = ndx.dimension((d) => d[xValue]);

var group = dimension.group().reduceSum((d) => d[yValue]);
const getTops = (source_group) => {
  return {
    all: () => source_group.top(50)
  };
};

var fakeGroup = getTops(group);
let groupSize = this.getGroupSize(fakeGroup, yValue);

let minimum = group.top(groupSize)[groupSize-1].value;

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)
  .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);
});

What I want is, that on 'filtered', the bars are filtering (which happens as expected), but also that the yScale is readjusting, making the top value the one that is still shown and within the filtered range. So if my max value was y:3000 and I filter out this bar and the next biggest y value is 2000, the yAxis should now rescale to have this value as the top value and use its full height to show the remaining bars.

Problem is, I can't get this to work. Every time I include chart.elasticY(true), my data and the yAxisLabel disappear, but no error message is printed. Can you point me in the right direction? What am I doing wrong?

[gordonwoodhull]

Right - elasticY is not properly supported for logarithmic scales.

I think there are some decent workarounds in #477. (This is a duplicate.)

It shouldn't be too difficult to get this working and the first step is an example, which we can then convert into a test case. If you'd care to help out that would be awesome!

[akuji1993]

Alright I'll check the issue and see if I can come up with some standard solution. Check back on this on Thursday/Friday maybe I got it working by then.

[gordonwoodhull]

I'm going to reopen this because apparently there is more than one issue here. In #477, the chart does not display at all because the baseline is calculated at -Infinity. In this issue, the chart apparently displayed once but got screwed up by filtering.

@akuji1993, I attempted to reproduce your problem in this fiddle: http://jsfiddle.net/gordonwoodhull/youk6aeo/14/

but the chart did not display at all, unless I enable the modified stack layout from #447. Once I enable the modified stack layout, it draws and filters okay. So I'm missing some information here.

[akuji1993]

I think we're still not on the same page, regarding this issue. No bars are showing up, if you include elasticY(true) in your code, that's the same for me. My issue just was, that I

1. didn't know that elasticY wasn't supported by log scales
2. didn't know how to build a workaround for this issue

So the "bug" here is, imo, that elasticY is not supported and needs an implementation for log scales.

If I understood you wrong, just say, I want to be of help.

[gordonwoodhull]

Thanks @akuji1993 - so I think the two issues are two sides of the same coin. We'll have to write careful tests that exercise both scenarios.

It looks like d3.log.scale is actually okay with zeroes, as long as the domain itself does not contain zeroes.

I'm puzzled that my stackLayout fix didn't work for you. It does work in my fiddle. That's what makes me suspect there are multiple issues here.

But I have to put this down for sometime when I more time to concentrate on it. I'm glad that doing "manual elastic with preRedraw worked for you!

[akuji1993]

It looks like d3.log.scale is actually okay with zeroes, as long as the domain itself does not contain zeroes.

That could be true, I just excluded all values that were zero and took the next minimum value until it wasn't 0 anymore.

I think the stackLayout doesn't really fit my problem. But I'm also not sure I did it right. But no problem, it worked with the preRedraw :)

[gordonwoodhull]

That makes sense, thanks.

Underneath, the bar chart always uses the stack layout - even if there is just "one stack". But let's not worry about that. Glad you got it working!

What I'll do is ping you when I have a general solution. If you have time to test it at that time, we can close this issue that way. I would have preferred to have a test specific to your use case but we'll see if it's necessary.

Unfortunately this is a side project for me so I don't know exactly when I will have the fix. There are a few more fundamental fixes which have higher priority, like the transition bugs. So don't sweat it if you've moved on to something else and don't have time to test this when it's complete.

[akuji1993]

Yeah, I read up on that a bit today in the documentation, so I should be able to get it working that way somehow. But for now, I also have to move on and get the rest of that project done first.

You can ping me, when you have something ready. I might need some time and some reading up, depending on how much d3/dc.js I do at that time, but no problem, will try to provide you with a test then.

Edit: And for a side project you're doing some awesome support, so thanks for that.