缩放后更改时间间隔答案

【问题标题】：Change time intervals after zooming缩放后更改时间间隔
【发布时间】：2017-06-23 06:27:28
【问题描述】：

我使用this 主题生成带有dc.lineChart 的自定义时间间隔。间隔 5 分钟，它看起来像下一张图片：

缩放后，我需要将时间间隔更改为更小。据我了解，我需要用新的间隔重新分组，但我该怎么做呢？

【问题讨论】：

我相信你看过the example I sent earlier。你有没有尝试整合它？接下来发生了什么？
是的，但可能没有完全理解。如果我使用.rangeChart，我应该在哪里调用你的setup() 函数？添加到onFiltered监听器？
我会和zoomed event 上的听众一起去。为此在 dc.js 中包含一个示例会很棒。如果你想贡献，也许你可以开始一个小提琴by forking this one，从zoomed 监听器和另一个示例中的代码开始，看看有什么问题，然后更新你的问题？
@Gordon 嗨！检查我的 dc.js 示例 here

【解决方案1】：

对于当前主题，我使用了this 示例并向on.('zoomed') 图表侦听器添加了一些逻辑。我在JSFiddle 上为其他人写了一些例子。

// read data
let experiments = d3.csv.parse(someCsvData);

//create and bind charts
let chart = dc.lineChart('#chart'),
    scrollChart = dc.barChart('#scrollChart');

// parse date    
experiments.forEach(x => {
  x.date = Date.parse(x.date);
});

// create crossfilter, dimension and group
let ndx   = crossfilter(experiments),
    dim   = ndx.dimension(d => new Date(d.date)),
    scrollGroup = dim.group(d3.time.month).reduceSum(d => +d.volume)

// define function for selecting time ticks
const getNormalizingTimeFunction = (dataSize) => {
    switch (true) {
        case dataSize < 100:
            return d3.time.day;
        case dataSize < 300:
            return d3.time.week;
        default:
            return d3.time.month;
    }
}

// create `start` and `end` time points
let startDate = experiments[0].date;
let endDate = experiments[experiments.length - 1].date;

scrollChart
  .width(768)
  .height(50)
  .x(d3.time.scale().domain([startDate, endDate]))
  .margins({left: 50, top: 10, right: 10, bottom: 20})
  .clipPadding(10)
  .dimension(dim)
  .group(scrollGroup)
  .alwaysUseRounding(true)
  .elasticY(true)
  .yAxis().ticks(0);

chart
 .width(768)
 .height(480)
 .brushOn(false)
 .x(d3.time.scale().domain([startDate, endDate]))
 .margins({left: 50, top: 10, right: 10, bottom: 20})
 .rangeChart(scrollChart)
 .dimension(dim)
 .group(scrollGroup)
 .renderArea(true)
 .on('zoomed', (chart) => {
    let actions = dim.top(Infinity);
    let normalizeTime = getNormalizingTimeFunction(actions.length);
    let newGroup = dim.group(normalizeTime).reduceSum(d => +d.volume)
    chart.group(newGroup);
    chart.redraw();
 });

chart.render();
scrollChart.render();

【讨论】：