使用 d3 和 dc.js 自定义时间轴答案

【问题标题】：Custom timeline tick with d3 and dc.js使用 d3 和 dc.js 自定义时间轴
【发布时间】：2017-06-20 14:31:45
【问题描述】：

我有下一张图表：

scrollChart
   ...
   .x(d3.time.scale().domain([startDate, endDate]))
   .round(d3.time.minutes)
   .alwaysUseRounding(true)
   .xUnits(d3.time.minutes);

如何更改我的 .xUnits 和 .round 以使用每 5/10/15 分钟作为时间间隔？

更新：

戈登的回答有所帮助，但缩放后我遇到了新问题。

这是 5 分钟的间隔：

在我放大后，我的图表很糟糕:(过滤后如何将所有“重新分组”到 1 分钟间隔？是真的吗？

【问题讨论】：

chart.round() 只影响画笔圆角。您可能希望按您感兴趣的时间间隔进行汇总。Here is an example of switching between different time intervals.
@Gordon 你是对的，但我需要自定义时间线和我的时间间隔，而不是month、day、hour
明白了，也许试试这个线程？ groups.google.com/forum/m/#!topic/dc-js-user-group/q_dO0pRf3vA
@Gordon 谢谢，有帮助。也许在其他人的答案中写更多的信息。我现在还有一个问题，你能帮我吗？我更新了我的帖子。
是的，那是known issue in dc.js。基本上，当它需要在边缘之外再保留一个点时，它会将点过滤到域内的点。虽然我在一个分支中有一个全面的修复，但它需要更多的工作，所以我现在会尝试在一个标志下推送一个解决方法。它困扰了我很长时间（显然）。

标签： javascript d3.js dc.js

【解决方案1】：

感谢Gordon 的帮助。我使用了d3.js version 3 和this 主题。首先你需要复制d3_time_interval函数，因为它没有暴露出来。

接下来我创建了函数并在分组中使用它。

const n_minutes_interval = (nMins) => {
    let denom = 6e4*nMins;
    return d3_time_interval(
         date => new d3_date(Math.floor(date / denom) * denom,
        (date, offset) => date.setTime(date.getTime() + Math.floor(offset) * denom, 
        date => date.getMinutes());
}

let myTimeInterval = n_minutes_interval(5);
let myGroup = dim.group(d => myTimeInterval(d)).someReduceFunction();

【讨论】：