Brushed Zoom

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

      
import scatter from 'daisy-chart/src/layouts/scatter';
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()});
  }
  
}

scatter().data(dataset)
  .name('scatter')
  .container('#daisy-example')
  .dimensions([
    {field: 'date', order: 'descending', interval: 'month', format: '%Y년%m월'}, 
  ])
  .measures([{field:'date', format: '%Y-%m-%d'}, 'num'])
  .axis('x').axis('y')
  .legend(true)
  .zoom('brush')
  .render();