d3 + angular dangle.js를 만져 보았습니다.

dangle.js는 무엇입니까?

dangle.js은 ↓ JavaScript 라이브러리.
- d3.js에 의한 그래프 드로잉을 angular.js의 지시문으로 제공합니다.
- elasticSearch 브라우저 용 시각화 용으로 개발 된 것 같습니다.

준비

필요한 .js는 다음과 같습니다.

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/d3/d3.min.js"></script>
<script src="bower_components/dangle/dist/dangle.min.js"></script>

bower를 사용하는 경우 ↓를 두드리면 위의 구성으로 .js를 얻을 수 있습니다.

$ bower install angluar
$ bower install d3
$ bower install dangle

원형 차트를 그려보세요

dangle은 scope의 데이터를 다양한 그래프로 그리는 것 같기 때문에 먼저 scope에 데이터를 준비합니다.

main.js

angular.module('firstDangleApp', ['dangle']).controller('MainCtrl', function ($scope) {
    $scope.data1 = {
        _type: 'terms',
        terms:[{
            term: 'IE',
            count: 21 
        },{
            term: 'FireFox',
            count: 18
        },{
            term: 'Chrome',
            count: 33
        },{
            term: 'Safari',
            count: 16 
        },{
            term: 'Opera',
            count: 3
        }]
    };
});

API 문서를 읽어도, 데이터의 JSON 스키마가 잘 모르지만, term에 데이터의 명칭, count에 대응량을 쓰면 좋다. _type 키에 'terms' 이외에 무엇을 취할 수 있을까는 불명.

따라서 위의 범위 데이터를 그리는 지시문은 다음과 같습니다.

index.html

<div ng-controller="MainCtrl">
  <fs-donut bind="data1" />
</div>

그리기 결과

↓처럼 된다. 또한 범례는 지시어가 마음대로 출력해 준다.

click로 애니메이션

fsDonut (원형 차트)뿐만 아니라 fsDateHisto (날짜 히스토그램)와 같은 fs- * 지시문에는 on-click 속성 (ng-click에 없음)을 붙일 수 있습니다.

아래와 같이 데이터 값을 업데이트하는 함수를 준비하고,

$scope.change = function(type, term){
  $scope.data1 = {...} //変更後データ(ex:term毎のcount値をいじる)
};

duration (단위는 밀리 세컨드)과 함께 fs- * 지시문에 붙여 넣으면 클릭으로 데이터 변동을 애니메이션으로 표시 할 수 있습니다.

index.html

<fs-donut bind="data1" on-click="change" duration="500" />

감상

API docs 보기에, 대응하고 있는 그래프도 원 그래프, 꺾은선, 일별 히스토그램, 바 차트의 4 종류만이며, 그래프 자체의 색등도 어떻게 커스터마이즈 하면 좋을까(원래 할 수 있지?) 불명으로 예, 아직 개발 도상 인상.

d3가 몰라도 angular만으로 그래프를 쓸 수 있는 것은 좋다.

비슷한 (또는 동일) 스택 라이브러리에 radian.js이 있지만 수학 그래프에 특화된 인상 때문에 danngle.js와 사용 장면이 약간 다릅니다. ..

참고 정보

본가 API 문서 ( h tp // w w. 푹 ls인가. 코/단 gぇ/ )