Line

선 차트는 Line을 이용해 제작한다. 해당 모듈은 Line 타입을 그대로 노출하는 대신에 Line 인스턴스를 생성하는 함수를 반환한다. 클라이언트 단에서 전체 모듈을 번들링한 형태로 사용할 때는 daisy.line()을 실행하여 Line 인스턴스를 생성한다. 모듈별로 사용할 때에는 아래와 같이 Line 모듈만을 불러와서 사용해도 좋다.

Line 타입은 RectLinear, Brushable, Seriesable, Zoomable 타입을 상속받는다.

import line from 'daisy-chart/src/layouts/line'
line().container('#chart-container')
  .data(dataset)
  .dimensions(['category', 'sub-category']) // 2개의 dimension을 사용하므로 다중-시리즈 선 차트 생성
  .measures([{field: 'value', op: 'sum'}])
  .axis('x').axis('y')
  .render();

선 차트의 유형은 범주(dimension), 수치(measure)의 조합과 형태 변형을 위한 옵션에 의해 형태가 결정된다. 그 예시는 아래와 같다.

• 범주 1개
  • 수치 0개: 범주의 값에 따라 데이터 요소 개수를 세서(count) 그 값을 수치로 사용하는 모노 선 차트
  • 수치 1개: 범주에 따라 수평 위치를 결정하고, 수치로 높이를 정하여 연결하는 모노 선 차트
  • 수치 2개 이상: 범주에 따라 수평 위치를 결정하고, 수치의 개수에 따라 서로 다른 시리즈(series)를 생성하는 다중-선 차트

• 범주 2개

  • 수치 0개: 범주의 값에 따라 데이터 요소 개수를 세서 그 값을 수치로 사용하는 다중-시리즈 차트
  • 수치 1개: 첫번째 범주에 따라 수평 위치를 결정하고, 두번째 범주로 서로 다른 시리즈(series)를 생성하는 다중-선 차트

• 누적

  • .stacked(true) : 첫번째 범주에 따라 수평 위치를 결정하고, 두번째 범주로 시리즈를 생성하여, 색상과 쌓이는 순서를 결정하는 누적 선 차트, 범주나 수치가 2개 이상인 경우에만 작동한다.

• 스몰 멀티플

  • .facet(true) : 첫번째 범주에 따라 수평 위치를 결정하고, 두번째 범주로 영역을 분리하는 스몰멀티플 형태의 다수의 모노 선 차트, 범주나 수치가 2개 이상인 경우에만 작동한다.

API Reference

# line.curve([curve]) <>

선의 커브 형태를 지정한다. curve 값은 linear|stepped|curved 중 하나이며 기본 설정 값은 linear이다.

# line.meanLine([meanLine]) <>

평균선 표시 여부를 설정 여부를 meanLine 값의 true|false로 설정한다. 기본 값은 false이다.

# line.multiTooltip([multiTooltip]) <>

다중 툴팁 표시 여부를 설정 여부를 multiTooltip 값의 true|fals로 설정한다. 기본 값은 false이며, true일 경우 다중-시리즈나 스몰멀티플 상태에서만 작동된다.

# line.normalized([normalized]) <>

누적 선 차트 설정시 값을 모두 0–1.0 사이의 값으로 정규화 하여 변환한다. line.stacked가 true인 경우에만 작동한다. 기본 설정값은 false이다.

line.stacked(true)
  .normalized(true);

# line.padding([padding]) <>

시리즈 선의 앞뒤 여백(padding)의 비율을 설정한다. 비율의 산정 방식은 d3.scalePoint.padding의 규칙을 따른다. 기본 설정값은 0 이다.

# line.point([point]) <>

point가 true인 경우, 시리즈 선 위에 데이터 포인트를 원의 형태로 표시한다. 기본 설정값은 false이다.

# line.pointRatio([pointRatio]) <>

line.point가 활성화 되었을 때 표시되는 원의 선 굵기 대비 반지름의 비율이다. 기본 설정값은 2이다.

line.size(2)
  .point(true)
  .pointRatio(3) // 반지름이 2*3 = 6px 인 원을 데이터 포인트에 그린다.

# line.regionPadding([regionPadding]) <>

line.facet이 활성화되어 스몰멀티플을 그릴 때, 영역간의 간격 비율을 d3.scaleBand.padding의 규칙에 따라 설정한다. 기본 설정값은 0.1 이다.

# line.shape([shape]) <>

선 차트의 형태를 shape 값 line|area에 따라 설정하다. 기본 값은 line이다. 일반적으로 누적 선 차트를 사용할 경우 area로 설정하는 것을 추천한다.

line.stacked(true)
  .shape('area');

# line.size([size]) <>

선 굵기를 px 단위로 설정한다. 기본 값은 2이다.

# line.stacked([stacked]) <>

누적 여부를 stacked 값의 true|false로 설정한다. 기본 값은 false이다.