Default

모든 종류의 데이지 차트는 Default를 상속받는다. Default는 기본적으로 컨테이너 경로나 크기, 색상, 범례 등의 요소 추가 여부등을 설정할 수 있도록 메소드를 제공한다.

default를 상속받은 차트 유형들은 아래와 같은 형태로 실행한다. 옵션 설정 이나 변경 후에는 반드시 .render()를 실행시켜 렌더링을 재개해야 한다.

var bar = daisy.bar().container('#chart-container')
  .data(dataset)
  .dimensions(['category', 'sub-category'])
  .measures([{field: 'value', op: 'sum'}])
  .axis('x').axis('y')
  .render();

bar.measures([{field: 'value', op: 'mean'}])
  .render();

API Reference

• 필수 설정 Required Settings
• 선택 설정 Optional Settings
• 내부 설정 출력 Internal Settings

데이지 차트에 사용되는 대부분의 메서드들은 공통된 설계를 가진다. 아래의 코드처럼 인스턴스의 __attrs__ 오브젝트에 메서드 이름과 동일한 키 이름에 값을 저장(Set)하거나, 이미 저장된 값을 불러올 수 있다(Get).

bar.width(400); //전체 차트의 너비를 400px로 설정한다.

console.log(bar.width()) //현재 차트의 너비를 확인한다. bar.__attrs__.width에 저장되어 있다.

필수 설정 Required Settings

차트를 생성 할 때 .render를 실행시키 전 아래의 속성들은 필수적으로 설정되어야 한다. 유형에 따라 dimension이나 measure 중 한가지만 설정하는 경우도 있다.

# default.container([selector]) <>

차트가 입력될 요소(Element)를 selector 스트링에 따라 선택한다. 여러 요소가 선택되면 처음 선택을 이용한다.

var bar = daisy.bar()
  .container('#chart-container');

selector가 스트링이 아닌 경우, 특정 노드를 직접 전달할 수 있다.

bar.container(document.getElementById('chart-container'));

# default.data([dataset]) <>

사용될 데이터셋dataset은 객체(레코드)의 배열 형태로 전달된다. 배열의 개별 오브젝트는 .dimensions와 .measures에 사용되는 필드 속성을 가지고 있어야 한다. 동일한 필드는 동일한 타입을 갖도록 해야한다.

var dataset = [
  {"x": 0, "y": -50, "z": 50, "c":"blue"}, {"x": 0, "y": 55, "z": 44, "c":"orange"},
  {"x": 1, "y": -43, "z": 23, "c":"blue"}, {"x": 1, "y": 20, "z": 20, "c":"orange"},
  ...
];

var bar = daisy.bar()
  .container('#chart-container')
  .data(dataset);

# default.dimension(dimension) <>

차트를 형성할 때 독립 변인으로 작동하는 레코드의 필드명을 범주(dimension)이라고 정의하고, .dimension은 이러한 범주로 작동하는 필드 이름을 배열에 추가하는 역할을 한다. 일반적인 상황에서는 default.dimensions를 사용하여 필드를 배열로 일괄 전달하고, 개별적으로 필드를 추가하는 경우에 .dimension 을 사용한다.

전달되는 dimension 값의 형태는 default.data로 전달된 데이터 셋에서 특정 레코드의 필드명을 스트링으로 전달하거나, {field: [fieldname], order: [natural|ascending|descending]} 형태의 객체로 전달한다. field는 레코드의 값을 가리키는 속성 이름의 스트링이고, order는 집산(Aggregation) 결과의 정렬 순서를 가리킨다. field는 필수이며 order는 선택이며, 기본 값이 'natural'이다. 추가로 format 필드에 포맷 스트링을 전달할 경우 d3.timeFormat을 기준으로 해당 필드의 Date형태의 값을 스트링으로 변환해서 사용한다.

var bar = daisy.bar()
  .container('#chart-container')
  .data(dataset)
  .dimension('x')

bar.dimension({field:'c', order: 'ascending'})

# default.dimensions([dimensions]) <>

범주 값을 배열의 형태로 전달한다. 입력받는 dimensions 배열의 개별 요소는 default.dimension에 전달되는 개별 인자와 같이 필드명을 가리키는 스트링이나 객체 형태가 되어야 한다.

dimensions 값이 없는 경우, 현재 저장된 범주 값들의 배열을 출력한다.

var bar = daisy.bar()
  .container('#chart-container')
  .data(dataset)
  .dimensions([{field:'c', order: 'ascending'}, 'x'])

# default.measure(measure) <>

차트를 생성할 때 종속 변인으로 작동하는 레코드의 필드명을 수치(measure)라고 정의하고, .measure는 이러한 수치로 작동하는 필드 이름을 배열에 추가하는 역할을 한다. 일반적인 상황에서는 default.measures를 사용하여 필드를 배열로 일괄 전달하고, 개별적으로 필드를 추가하는 경우에 .measure 를 사용한다.

전달되는 dimension 값의 형태는 default.data로 전달된 데이터 셋에서 특정 레코드의 필드명을 스트링으로 전달하거나, {field: [fieldname], op: [sum|mean|variance|min|max|median]} 형태의 객체로 전달한다. field는 레코드의 값을 가리키는 속성 이름의 스트링이고, op는 집산(Aggregation)의 계산 방식을 가리킨다. field는 필수이며 op는 선택이며, 기본 값이 'sum'이다. field에 해당하는 값은 숫자나 날짜 타입 이어야 한다. 추가로 format 필드에 포맷 스트링을 전달할 경우 d3.timeFormat을 기준으로 해당 필드의 Date형태의 값을 스트링으로 변환해서 사용한다. 또한 customDomain 속성에 [min, max] 배열 형태의 값을 입력하는 경우, 해당 값의 범위 만큼 해당 수치의 범위를 인위적으로 조정한다. 해당 값을 입력하지 않는 경우 데이터 자체의 최대 최소 범위를 기준으로 계산한다.

var bar = daisy.bar()
  .container('#chart-container')
  .data(dataset)
  .dimensions([{field:'c', order: 'ascending'}, 'x'])
  .measure('y')

bar.measure({field: 'z', op: 'mean', customDomain: [10, 100]});

# default.measures([measures]) <>

수치 값을 배열의 형태로 전달한다. 입력받는 measures 배열의 개별 요소는 default.measure에 전달되는 개별 인자와 같이 필드명을 가리키는 스트링이나 객체 형태가 되어야 한다.

measures 값이 없는 경우, 현재 저장된 수치 값들의 배열을 출력한다.

var bar = daisy.bar()
  .container('#chart-container')
  .data(dataset)
  .dimensions([{field:'c', order: 'ascending'}, 'x'])
  .measures(['y', {field: 'z', op: 'mean', customDomain: [10, 100]}]);

# default.render() <>

설정된 값에 따라 해당 차트 유형을 생성한다. 내부적으로는 유형별로 설정된 .renderLayout 메서드를 실행시켜 선택된 영역 안에 차트를 렌더링 한다.

var bar = daisy.bar()
  .container('#chart-container')
  .data(dataset)
  .dimensions([{field:'c', order: 'ascending'}, 'x'])
  .measures(['y', {field: 'z', op: 'mean', customDomain: [10, 100]}])
  .render();

선택 설정 Optional Settings

# default.aggregated([aggregated]) <>

데이터셋이 이미 집산(aggregation)되어 트리 형태로 넘어오는 경우 true로 설정하여 사용할 수 있다. 스몰 멀티플즈를 이용할 경우에만 부분적으로 활용된다. 기본 설정값은 false 이다.

# default.color([colors]) <>

default.color는 색상 값의 배열을 설정하는데 사용된다. 입력된 colors 값은 CSS 기반 색상 값을 스트링 형태로 담은 배열 값이어야 한다.

색상의 활용 방식은 유형별로 다르며, 크게 순차적 사용과 연속적 사용 방식으로 구분된다. 순차적 사용시에는 차트의 마크(mark)에 개별 색상을 순차적으로 할당하며, 색상보다 마크의 개수가 많을 경우 다시 배열의 처음 색상으로 돌아와 순서대로 적용한다. 순차적 사용 시 기본 설정 값은 d3.js의 d3.schemeCategory10의 값이다. 연속적 사용시에는 입력된 색상을 선형보간하여 중간 색을 특정 기준에 따라 할당한다. 이 때 기본 설정 값은 ['#ece7f2','#2b8cbe'] 이다.

• 순차적 사용: bar, scatter, line, par-coords, pie, marker-map
• 연속적 사용: treemap, xy-heatmap

bar.color(['red', '#00FF00', 'rgb(0,0,255)']);

treemap.color(['#ece7f2','#2b8cbe']);

# default.customDomain([extent]) <>

차트의 수치(measure) 값의 범위를 임의로 조작한다. extent 값은 원하는 범위를 [min, max] 형태로 입력한다. 일부 조건에서는 해당 값이 반영되지 않을 수 있다.

bar.customDomain([10, 200]);

# default.facet([orient]) <>

일부 유형(bar, line, scatter)의 경우 스몰멀티플(small multiple) 형태로 출력이 가능하다. orient 값을 vertical|'horizontal 에 설정함에 따라 스몰멀티플 방향을 전환할 수 없습니다. 미사용시에는 false 값을 전달합니다. true 값을 전달할 경우 기본으로 vertical 방향으로 설정됩니다.

bar.facet('vertical');

# default.font([setting]) <>

툴팁과 레이블에 사용되는 폰트 설정을 변경한다. setting의 기본 설정 값은 아래와 같다.

{
  'font-family': 'sans-serif', //서체
  'font-size': 12, //크기
  'font-weight': 'lighter',//굵기
  'font-style': 'normal' //스타일
}

설정 변경을 원하는 프로퍼티를 변경하여 setting을 오브젝트 형태로 전달하면 반영된다.

bar.font({'font-size': 14});

# default.grid([grid]) <> rectLinear.grid로 이전 예정

축의 틱(tick)에 맞추어 격자를 그린다. grid에 true|false를 전달하여 격자 여부를 결정한다.

# default.height([height]) <>

차트의 높이를 설정한다. height에 원하는 높이의 px 값을 전달한다. 기본 설정값은 480 이다.

# default.highlightColor([color]) <>

마크와 범례의 하이라이트 색상을 설정한다. 기본 설정값은 #fddd9b 이다.

# default.label([label]) <>

마크 상에 레이블 표시 여부를 true|false로 설정한다. 기본 설정값은 false이다.

# default.legend([setting]) <>

범례 표시 여부와 방향 및 두께를 설정한다. setting에 true|false를 전달하여 표시 여부를 설정하거나, 객체를 전달하여 표시와 설정을 겸할 수 있다. true 전달시에 기본 설정 값은 {orient: 'bottom', thickness: 54 } 이다. 객체 전달시에 orient 값은 필수이며 top|right|bottom|left 에서 선택가능하다. thickness 값은 선택적으로 입력한다.

bar.legend(true);
bar.legend({orient:'right'});

# default.name([name]) <>

해당 차트에 고유한 이름을 부여한다. 추후 이름을 통해 차트를 검색하는 기능을 추가 예정

# default.margin([margin]) <>

차트의 여백 공간을 설정한다. margin는 {top,right,bottom,left} 형태의 객체이다. 기본 설정값은 {top: 40, right: 40, bottom: 40, left: 40}이다.

bar.margin({top: 100, right: 40, bottom: 40, left: 100},);

# default.multiTooltip([multiTooltip]) <> line에서만 사용중 이므로 이관 예정

다중 툴팁 표시 여부와 다중 툴팁의 다중 값 표시 정렬 순서를 결정한다. tooltip 은 true|false나 {sortByValue:natural|ascending|descending} 값을 전달한다. 값이 true인 경우, natural 정렬을 기본 설정값으로 사용한다.

# default.parent([parent]) <>

스몰멀티플의 자식 차트 생성시에 부모 차트를 설정한다. 일반적인 사용 환경에서는 사용할 필요 없다.

# default.size([size]) <>

일부 차트 유형의 마크 크기를 px 단위로 조절한다. line, par-coords은 선의 굵기, scatter, pie는 반지름 최소-최대 크기, treemap 전체 크기의 가로-세로 크기를 설정하는데 사용된다.

size는 숫자, 배열, 객체 형태로 입력 가능하다. 모든 입력은 실제로 {range, reverse} 객체 형태로 환원된다. range 속성이 실제 사이즈를 조절하며, reverse는 선택으로 range를 변환해서 사용하고 싶을 때 설정한다. [min, max] 형태의 배열 입력 시에는 해당 배열 값이 {range:[min, max]} 형태로 입력된다. 숫자를 입력할 경우에는 {range: [num, num]} 형태로 변환된다.

line.size(3); //선굵기가 3이 된다. {range:[3,3]}

scatter.size([10, 30]); //원 반지름이 10–30 범위를 갖는다.

treemap.size({range:[400, 300]}) //트리맵 최대 크기가 너비 400, 높이 300을 갖는다.

# default.tooltip([tooltip]) <>

툴팁 표시 여부와 툴팁의 다중 값 표시 정렬 순서를 결정한다. tooltip 은 true|false나 {sortByValue:natural|ascending|descending} 값을 전달한다. 값이 true인 경우, natural 정렬을 기본 설정값으로 사용한다.

bar.tooltip(true);

scatter.tooltip({sortBuValue: 'ascending'});

# default.transition([transition]) <>

차트의 트랜지션 효과에 사용되는 duration과 delay값을 설정한다. transition은 {duration, delay} 형태의 객체로 입력하며, 기본 설정값은 {duration: 600, delay: 20}로 단위는 밀리세컨즈 이다.

# default.width([width]) <>

차트의 너비를 설정한다. width에 원하는 너비의 px 값을 전달한다. 기본 설정값은 640 이다.

내부 설정 출력 Internal Settings

내부적으로 차트를 생성시에 활용하는 메서드로 라이브러리 개발이 아닌 실제 활용 단계에서는 접근할 필요가 없지만, 정보를 확인하고 싶은 경우에만 Getter로 사용한다.

# default.conditon([conditon]) <>

차트의 유형별 조건을 설정할 때 사용되며, 인자를 전달하지 않을 경우, 해당 차트의 현재 조건을 확인할 수 있다. condition에는 조건을 결정하는 함수를 인자로 전달한다.

# default.domain([scaleName]) <>

차트 생성시 활용되는 스케일(Scale)의 도메인(Domain)을 확인하고 싶은 경우 활용한다. scaleName은 x|y|color|region 이 있으며 유형과 조건에 따라 출력이 되지 않을 수 있다.

console.log(bar.domain('y')); //수치의 [min, max] 범위 출력

# default.filterNodes(condition) <>

특정 조건 condition 의 마크(Mark)에 해당하는 노드(Node)들을 필터링하여 반환 받을 때 사용한다. default.render를 실행한 이후 사용해야 정상 작동한다. condition은 노드별 데이터를 첫번째 인자로 갖고 true|false를 반환하는 함수로 작성한다. 결과로 해당 조건을 만족하는 노드들의 d3-selection 이 반환된다.

bar.filterNodes(function(t) {
    return t.data.key === d.data.key;
  })

# default.filterRegions(condition) <>

특정 조건 condition 의 영역(Region)들을 필터링하여 반환 받을 때 사용한다. default.render를 실행한 이후 사용해야 정상 작동한다. condition은 영역별 데이터를 첫번째 인자로 갖고 true|false를 반환하는 함수로 작성한다. 결과로 해당 조건을 만족하는 영역들의 d3-selection 이 반환된다.

bar.filterRegions(function(t) {
    return t.data.key === d.data.key;
  })

# default.highlightNodes(condition) <>

특정 조건 condition 의 마크(Mark)에 해당하는 노드(Node)들을 필터링하여 하이라이트 할 때 사용한다. default.render를 실행한 이후 사용해야 정상 작동한다. condition은 노드별 데이터를 첫번째 인자로 갖고 true|false를 반환하는 함수로 작성한다. 결과로 해당 조건을 만족하는 노드들의 d3-selection 이 반환된다.

bar.highlightNodes(function(t) {
    return t.data.key === d.data.key;
  })

# default.highlightRegions(condition) <>

특정 조건 condition 의 영역(Region)들을 필터링하여 하이라이트 할 때 사용한다. default.render를 실행한 이후 사용해야 정상 작동한다. condition은 영역별 데이터를 첫번째 인자로 갖고 true|false를 반환하는 함수로 작성한다. 결과로 해당 조건을 만족하는 영역들의 d3-selection 이 반환된다.

bar.filterRegions(function(t) {
    return t.data.key === d.data.key;
  })

# default.innerSize([series]) <>

차트 전체 영역 내에서 축,범례,여백을 제외한 마크(Mark)가 그려지는 실제 영역을 반환한다. 반환 결과는 {width, height} 형태의 객체이다. series 값을 true로 입력하면 [width, height] 형태의 배열이 반환된다.

# default.offset() <>

차트 전체 영역 내에서 여백과 축,범례 영역을 포함한 영역의 크기를 반환한다. 반환 결과는 {top, right, bottom left} 형태의 객체이다.

# default.scale([scaleName]) <>

차트 생성시 활용되는 스케일(Scale)을 확인하고 싶은 경우 활용한다. 해당 스케일은 d3-scale의 인스턴스이다. scaleName은 x|y|color|region 이 있으며 유형과 조건에 따라 출력이 되지 않을 수 있다.

console.log(bar.scale('y')); //수치의 스케일 출력