变焦后更改时间间隔

Question

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

放大后，我需要改变的时间间隔更小。据我所知，我需要以新的时间间隔重新组合，但我该怎么做？

Answer 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();