缩放后更改时间间隔

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