Line chart doesn't render between points if one falls outside the x-range/focus

[onorinbejasus]

I couldn't find a previous issue that detailed this:

If a point lies beyond the X-axis' current focus/domain, the line between the points will not render. This seems to have been a problem since 2.0.0 alpha 1.

Here is the expected behavior using 1.7.3:
https://jsfiddle.net/7qre8p51/2/

And the current behavior with 2.0.0b12

https://jsfiddle.net/7qre8p51/8/

[onorinbejasus]

The problem stems from the function that domainFilter() uses to compare values to be plotted. As the it stands currently, the comparator is determined by the chart's domain: _chart.x().domain. Thus, data outside of the chart's range will never be rendered -- or drawn to in this case.

The (temporary) solution:

Extend xDomain in domainFilter() to include the previous and next values if they exist:

 var xDomain = _chart.x().domain(),
       prev = _chart.group().top(Infinity).filter(function(d) {return d.key < xDomain[0] } ),
       prev = (prev.length > 0) ? prev[0].key : xDomain[0],
       next = _chart.group().top(Infinity).filter(function(d) {return d.key > xDomain[1] } ),
       next = (next.length > 0) ? next[next.length-1].key : xDomain[1];

       // set the new XDomain
       xDomain = [prev, next]; 

[gordonwoodhull]

Thanks @onorinbejasus, that sounds about right.

[onorinbejasus]

I actually like this solution more, but both work. The benefit of this one is that we don't have to worry about filters that may exist on the crossfilter object:

        dc.stackMixin = function (_chart) {
            function prepareValues (layer, layerIdx) {
                var valAccessor = layer.accessor || _chart.valueAccessor();
                layer.name = String(layer.name || layerIdx);
                layer.values = layer.group.all().map(function (d, i) {
                    return {
                        x: _chart.keyAccessor()(d, i),
                        y: layer.hidden ? null : valAccessor(d, i),
                        data: d,
                        layer: layer.name,
                        hidden: layer.hidden
                    };
                });

                layer.values = layer.values.filter(domainFilter(layer.values));
                return layer.values;
            }

            var _stackLayout = d3.layout.stack()
                .values(prepareValues);

            var _stack = [];
            var _titles = {};

            var _hidableStacks = false;

            function domainFilter(values) {
                if (!_chart.x()) {
                    return d3.functor(true);
                }

                var xDomain = _chart.x().domain(),
                      minX = xDomain[0],
                      maxX = xDomain[1];    

                if (_chart.isOrdinal()) {
                    // TODO #416
                    //var domainSet = d3.set(xDomain);
                    return function () {
                        return true; //domainSet.has(p.x);
                    };
                }
                if (_chart.elasticX()) {
                    return function () { return true; };
                }

                if (values) {
                  maxX = d3.min(values, function(d) {
                    return d.x < xDomain[1] ? Math.MAX_VALUE : d.x;
                  });

                  minX = d3.max(values, function(d) {
                    return d.x > xDomain[0] ? Math.MIN_VALUE : d.x;
                  });
                }

                return function (p) {
                    return p.x >= minX && p.x <= maxX;
                };
            }

The major changes here are

1. passing the values array into the domainFilter function:

layer.values = layer.values.filter(domainFilter(layer.values)); 

...

 function domainFilter(values) { ...

2. evaluating the bounds if the values array exists:

 if (values) {
   maxX = d3.min(values, function(d) {
       return d.x < xDomain[1] ? Math.MAX_VALUE : d.x;
     });

     minX = d3.max(values, function(d) {
           return d.x > xDomain[0] ? Math.MIN_VALUE : d.x;
     });
 }

3. and returning the new evaluation function:

return function (p) {
   return p.x >= minX && p.x <= maxX;
};

[mtraynham]

Tagging #525, somewhat related.

[gordonwoodhull]

Root cause is also related to #507 - need to include a domain larger than the chart.

[gordonwoodhull]

This SO question is probably a manifestation: http://stackoverflow.com/q/37033997/676195

[gordonwoodhull]

Until this is fixed properly, there is a flag evadeDomainFilter which just skips filtering of points. It's available in dc.js 2.0.4 and 2.1.7.