Line

Brushed Zoom

.zoom('brush')로 설정을 하여 하단에 브러쉬 요소를 삽입하여 줌 기능을 사용할 수 있다. 해당 예제에서는 날짜 형태의 데이터를 date 필드에 입력하고 이를 첫번째 범주로 사용하였다. 그리고 해당 범주의 intervalweek으로 설정하여 집산 단위를 주단위로 설정하였다. 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();