Limit zoom bounds when zoomOutRestrict(true)

[indrimuska]

Problem

Zoom range goes out of bound when I pan the chart over the limits (FIDDLE).

Understanding the problem

That issue occurs because how it's made constrainRange() private function of coordinateGridMixin:

function constrainRange (range, constraint) {
        var constrainedRange = [];
        constrainedRange[0] = d3.max([range[0], constraint[0]]);
        constrainedRange[1] = d3.min([range[1], constraint[1]]);
        return constrainedRange;
}

As you see it doesn't take care if constrainedRange[1] (upper zoom limit) < constrainedRange[0] (lower zoom limit).

Solution

Based on @mhsmith PR for d3.js (d3/d3#1299), I replicated the behavior of the proposed zoom.xExtent method and replaced the function constrainRange() with a new one called restrictZoom().

This is FIDDLE showing the solution using the compiled version of my zoom-limit branch.

[indrimuska]

Updated (solution) fiddle after last commit:
http://jsfiddle.net/faux1vzy/

[gordonwoodhull]

Fixed references in before-fiddle: https://jsfiddle.net/muxhu0Lh/1/
In after-fiddle: http://jsfiddle.net/gordonwoodhull/7L3cvec4/2/

[gordonwoodhull]

Thanks for the contribution, @indrimuska! This has a whole lot of mapping between domain and range coordinates, and to be honest I've been intimidated to look at it.

But I think it can be much, much simpler. It really just needs to keep the same width (if possible), and clamp to the left and right sides. So I'm going to change the interface a little bit and implement it like this:

    function constrainExtent (extent, constraint) {
        var size = extent[1] - extent[0];
        if (extent[0] < constraint[0]) {
            return [constraint[0], Math.min(constraint[1], constraint[0] + size)];
        } else if (extent[1] > constraint[1]) {
            return [Math.max(constraint[0], constraint[1] - size), constraint[1]];
        } else {
            return null;
        }
    }

Both your implementation and mine have the same flaw that they are not updating the zoom behavior. So you can continue panning off the edge, and internally the zoom behavior will continue to change the translate - and when you start panning back, zoom will be unresponsive until the zoom again corresponds to the chart domain/range.

Still, I think this is better than the old behavior, and d3v4 natively includes the feature, so I think this is good enough for now.

[gordonwoodhull]

I've also taken the liberty of turning your fiddle into an interactive test - I can't imagine how to test this stuff automatically, yet we still do need tests.

My fix and your test will be in dc.js 2.0.

[indrimuska]

Hi @gordonwoodhull,
I didn't believe that someone could answer to this issue, thank you for this.
In the meantime, I have upgraded my branch in order to support a related bug already present in your interactive test.

You can reproduce it by trying to zoom in one of the bound, let's say on the left side. If you drag the chart on the left nothing happens. But when you try to drag again on the other side (right) it does not change the domain immediately, it does after a while. This is because the "translated domain" has been moved outside the limits and after a while of right-dragging you put it in the right bounds.

I've just pushed a commit in my zoom-limit branch with the fix I found a year ago.
If you like I can open a PR so you can better check the changes.
Thanks :)