DC.js x轴范围，只显示一个子集

Question

在下面的示例中，将 x 轴调整为仅显示 "Number of Events by Magnitude" 的 2 - 最大值的最佳方法是什么？

dc.js chart example, New Zealand Earthquakes

Answer 1

更改此行：

.x(d3.scale.linear().domain([0.5, 7.5]))

收件人：

.x(d3.scale.linear().domain([2, d3.max(data, d=>d.mag)]))

Answer 2

这个答案扩展了@Gerardo 的解决方案，使图表动态调整，并处理一些 dc.js 怪癖。

首先，这个例子的原作者捏造了一些东西只是为了让东西正常工作。如果你想要真正的动态轴，你需要展示 dc.js 如何计算条形自身的宽度：

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

并删除 .gap(65) - 这种神奇的数字始终表明有人无法弄清楚如何自动计算事物。

dc.js 处理条形图的方式有一些怪癖。一方面，它在设置域时并没有真正考虑到自己的条形宽度或居中 - 它完全使用您提供的内容。您会注意到在自动计算最大值时缺少最右边的条。（elasticX(true) 也会发生这种情况。）

所以让我们关闭条形居中并在每次计算时将 0.1 条形宽度添加到域。

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

接下来，crossfilter 不会自动删除空 bin，因此我们可以将组包装在 fake group 中来执行此操作：

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))

我们可以让图表在每次重新绘制时重新计算其域，如下所示：

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

区块的分叉：http://bl.ocks.org/gordonwoodhull/7675bb4bb67354cfdc7c6841106d7b31

DC.js x轴范围，只显示一个子集

DC.js xAxis range, show only a subset

d3.js

dc.js