我可以在 d3.js 轴中定义最大刻度数吗？

Question

我有一个在 X 轴上使用 d3.scaleTime() 的 dc.js seriesChart。数据动态变化，从一周到几年不等，所以我没有为 scaleTime 定义域或范围。相反，我使用的是 dc.js elasticX(true)，我猜它会根据需要计算它们。我还使用了fake group to remove the empty bins，以便在用户更改数据过滤器时自动刷新 X 轴。

一切都按预期工作，但如果我只过滤一周，我会得到比我想要的更多的滴答声。请注意，我每天只有一个数据点，但最多 4 个滴答声：

我可以使用axis.ticks 每天只生成一个刻度：

chart.xAxis()
     .tickFormat(d3.timeFormat('%Y-%m-%d'))
     .ticks(d3.timeDay);

但是它会产生每天一个滴答声。如果我选择一整年，那其中有 365 个是重叠的。

我不能使用.ticks(n) 始终生成n 滴答声，因为这会带回我最初遇到的问题：当我设置的数字大于所选天数时重复滴答声。我也不能使用.tickValues([ ])，因为这些值是动态的。

有没有办法告诉 d3 在给定的时间间隔内生成刻度，但限制为最大刻度数？所以在我的例子中，它实际上是“如果它适合，或者每隔天天”。

我发现最接近的是this answer，它们会根据范围动态更改间隔。但是，由于我让 dc.js 和 Crossfilter 处理数据和过滤，因此计算起来并不容易。我想我必须在图表中使用attach a renderlet event，并使用xAxisMin() and xAxisMax()？我认为它可以工作，但它看起来不太好。有没有更简单的方法？

Answer 1

我有第一个“可行”的解决方案......它比我想象的要丑：

const chart = dc.seriesChart('#myChart')
    // ...
    .x(d3.scaleTime())
    .elasticY(true)
    .elasticX(true)
    .on('renderlet', updateTicks);
    .xAxis()
        .tickFormat(d3.timeFormat('%Y-%m-%d'))
        .ticks(10); // We set 10 ticks by default
chart.render();

// Needed to prevent infinite loops...
let redrawing = false;

function updateTicks(chart) {
    if (redrawing) {
        redrawing = false;
    } else {
        const days = (chart.xAxisMax() - chart.xAxisMin()) / 86400000;
        if (days < 10) {
            chart.xAxis().ticks(d3.timeDay);
        } else {
            chart.xAxis().ticks(10);
        }
        redrawing = true;
        chart.redraw();
    }
}

xAxisMin() 和xAxisMax() 值在图表已经被渲染或重绘之前不会被计算，所以我必须使用renderlet 事件而不是preRedraw。而且由于图表已经绘制，我对轴所做的任何更改都将在下一次重绘之前生效......所以我必须自己强制它（并防止无限循环，因为我的重绘将触发一个新的渲染组件事件)。

这不仅是丑陋的代码，轴的转换实际上在图表上是可见的。正如 Gordon 所指出的，我可以通过使用 pretransition 事件来避免它。或者通过直接从 Crossfilter 组计算 preRender/preRedraw 事件的最小值和最大值，但它开始感觉像是一个巨大的矫枉过正。

---

这是一个可行但仍然丑陋的解决方案，我自己计算最小值和最大值：

const chart = dc.seriesChart('#myChart')
    // ...
    .x(d3.scaleTime())
    .elasticY(true)
    .elasticX(true)
    .on('preRender', updateTicks),
    .on('preRedraw', updateTicks);
    .xAxis().tickFormat(d3.timeFormat('%Y-%m-%d'));
chart.render();

function updateTicks(chart) {
    const range = chart.group().all().reduce((accum, d) => minMax(d.key.date, accum), {});
    const days = 1 + ((new Date(range.max) - new Date(range.min)) / 86400000);
    if (days <= 7) {
        chart.xAxis().ticks(d3.timeDay);
    } else if (days <= 30) {
        chart.xAxis().ticks(d3.timeMonday);
    } else {
        chart.xAxis().ticks(d3.timeMonth);
    }
}

function minMax(val, obj) {
    if ((obj.min === undefined) || (val < obj.min)) {
        obj.min = val;
    }
    if ((obj.max === undefined) || (val > obj.max)) {
        obj.max = val;
    }
    return obj;
}

代码本身并不难看，只是很烦人 - 每次我重绘图表时都要遍历整个数据数组，只是为了找到最小值和最大值，无论如何这将由 dc/crossfilter/d3 再次计算。