[Solved]-DC.js xAxis range, show only a subset-d3.js

This answer expands on @Gerardo's solution, making the chart adjust dynamically, and dealing with a few dc.js quirks.

First, the original author of this example fudged a few things just to get stuff working. If you want truly dynamic axes, you'll need to show dc.js how to calculate the bar widths for itself:

magnitudeChart
  .xUnits(dc.units.fp.precision(0.1))

and remove .gap(65) - that kind of magic number is always a sign that someone couldn't figure out how to get things calculated automatically.

There are a few quirks with how dc.js deals with bar charts. For one, it doesn't really account for its own bar width or centering when it sets the domain - it uses exactly what you give it. You'll notice that the rightmost bar is missing when automatically calculating the maximum. (This happens with elasticX(true) too.)

So let's turn off bar-centering and add the 0.1 bar width to the domain each time we calculate it.

magnitudeChart
  .centerBar(false)
  .x(d3.scale.linear().domain([2, d3.max(data, d=>d.mag)+0.1]))

Next, crossfilter does not automatically remove empty bins, so we can wrap the group in a fake group to do that:

function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.value != 0;
            });
        }
    };
}

magnitudeChart
  .group(remove_empty_bins(magValueGroupCount))

And we can have the chart recalculate its domain every time it's redrawn like so:

.on('preRedraw', function(chart) {
  chart.x().domain([2, d3.max(chart.group().all(), kv=>kv.key) + 0.1]);
  chart.rescale();
});

Fork of the block: http://bl.ocks.org/gordonwoodhull/7675bb4bb67354cfdc7c6841106d7b31