ズーム後の時間間隔を変更する

Question

thisトピックを使用して、dc.lineChartで自分のカスタム時間間隔を生成します。私は小さいに時間間隔を変更する必要があり、ズーム後

：それは次の写真のように見える間隔5分で 。私が理解しているように、私は新しいインターバルでいくつかの再グループをする必要がありますが、どうすればいいですか？

Answer 1

私はthisの例を使用して、on.('zoomed') chart listenerにいくつかのロジックを追加しました。私はに他の人のためのいくつかの例を書いた。

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