缩放后更改时间间隔

Question

我使用 this 主题生成我的自定义时间间隔 dc.lineChart。间隔 5 分钟，如下图所示：

缩放后我需要将时间间隔更改得更小。据我所知，我需要用新的时间间隔做一些 re-group，但我该怎么做？

Answer 1

对于当前主题，我使用了 this example and add some logic to on.('zoomed') chart listener. I wrote some example for other people on 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();

缩放后更改时间间隔

Change time intervals after zooming

javascript

d3.js

dc.js