Brushed Zoom

.zoom('brush')로 설정을 하여 하단에 브러쉬 요소를 삽입하여 줌 기능을 사용할 수 있다. 해당 예제에서는 날짜 형태의 데이터를 date 필드에 입력하고 이를 첫번째 범주로 사용하였다. 그리고 해당 범주의 interval을 week으로 설정하여 집산 단위를 주단위로 설정하였다. format을 통해 툴팁 출력시 형태를 결정하였다.

      
import line from 'daisy-chart/src/layouts/line';
import {timeDays} from 'd3-time';

var dates = timeDays(new Date(2016, 0, 1), new Date(2018, 0, 1), 1);
var dataLength = 731;
var dataset = [];
var i, j;
for (i = 0; i < dataLength; i ++) {
  for (j = 0; j < 3; j ++) {
    dataset.push({category: j, date: dates[i%dates.length], value: Math.random() * 1000, num : dates[i%dates.length].getMonth()});
  }
  
}

line().data(dataset)
  .container('#daisy-example')
  .name('line')
  .dimensions([
    {field: 'date', order: 'descending', interval: 'week', format: '%Y년%m월%d일'}, 
    {field: 'category', order: 'descending'}
  ])
  .measures([{field: 'value', op:'mean'}])
  .axis('x').axis('y')
  .shape('area')
  .stacked(true)
  .zoom('brush')
  .legend(true)
  .multiTooltip(true)
  .render();