變焦後更改時間間隔

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