DC.js-원형 차트

원형 차트는 원형 통계 그래프입니다. 숫자 비율을 표시하기 위해 조각으로 나뉩니다. 이 장에서는 DC.js를 사용하여 원형 차트를 그리는 방법을 자세히 설명합니다.

파이 차트 방법

원형 차트를 그리기 전에 다음 사항을 이해해야합니다. dc.pieChart클래스 및 메서드. dc.pieChart는 믹스 인을 사용하여 차트를 그리는 기본 기능을 얻습니다. dc.pieChart에서 사용하는 믹스 인은 다음과 같습니다.

baseMixin
capMixin
colorMixin

dc.pieChart의 전체 클래스 다이어그램은 다음과 같습니다.

dc.pieChart는 위에 지정된 믹스 인의 모든 메서드를 가져오고 원형 차트를 구체적으로 그리는 자체 메서드를 가지고 있습니다. 그들은 다음과 같습니다-

cx ([cx])
drawPaths ([경로])
emptyTitle ([제목])
externalLabels ([레이블])
innerRadius ([innerRadius])
minAngleForLabel ([minAngleForLabel])
반경 ([반경])
slicesCap ([캡])

각각에 대해 자세히 논의하겠습니다.

cx ([cx])

아래에 정의 된 중심 x 좌표 위치를 가져 오거나 설정하는 데 사용됩니다.

chart.cx = function (cx) {
   if (!arguments.length) {
      return (_cx ||  _chart.width() / 2);
   }
};

마찬가지로 y 좌표 위치를 수행 할 수 있습니다.

drawPaths ([경로])

이 방법은 원형 차트의 경로를 그리는 데 사용되며 아래에 정의되어 있습니다.

chart.drawPaths = function (path) {
   if (arguments.length === 0) {
      return path;
   }
};

emptyTitle ([제목])

이 방법은 데이터가 없을 때 제목을 설정하는 데 사용됩니다. 아래에 정의되어 있습니다-

chart.emptyTitle = function (title) {
   if (arguments.length === 0) {
      return title;
   }
};

externalLabels ([레이블])

차트의 바깥 쪽 가장자리에서 오프셋 된 조각 레이블을 배치하는 데 사용됩니다. 아래에 정의되어 있습니다-

chart.externalLabels = function (label) {
   if (arguments.length === 0) {
      return label;
   } 
};

innerRadius ([innerRadius])

이 방법은 원형 차트의 내부 반경을 가져 오거나 설정하는 데 사용됩니다. 내부 반경이0px이면 원형 차트가 도넛 형 차트로 렌더링됩니다. 아래에 정의되어 있습니다-

_chart.innerRadius = function (innerRadius) {
   if (!arguments.length) {
      return _innerRadius;
   }
};

minAngleForLabel ([minAngleForLabel])

이 메서드는 레이블 렌더링을위한 최소 슬라이스 각도를 가져 오거나 설정하는 데 사용됩니다. 아래에 정의되어 있습니다-

_chart.minAngleForLabel = function (minAngleForLabel) {
   if (!arguments.length) {
      return _minAngleForLabel;
   }
   _minAngleForLabel = minAngleForLabel;
   return _chart;
};

반경 ([반경])

이 메서드는 외부 반경을 가져 오거나 설정하는 데 사용됩니다. 반경을 지정하지 않으면 최소 차트 너비와 높이의 절반을 차지합니다. 아래에 정의되어 있습니다-

_chart.radius = function (radius) {
   if (!arguments.length) {
      return _givenRadius;
   }
   _givenRadius = radius;
   return _chart;
};

slicesCap ([캡])

원형 차트가 생성 할 최대 조각 수를 가져 오거나 설정합니다. 상단 조각은 높은 값에서 낮은 값으로 결정됩니다. 한도를 초과하는 다른 슬라이스는 하나의 '기타'슬라이스로 롤업됩니다.

원형 차트 그리기

DC에서 원형 차트를 만들어 보겠습니다. 이 원형 차트 예에서 이름이people.csv파일. 샘플 데이터 파일은 다음과 같습니다-

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

....................
....................
....................

위의 샘플에는 많은 레코드가 포함되어 있습니다. 다음 링크를 클릭하여 파일을 다운로드하고 DC 위치에 저장할 수 있습니다.

people.csv

이제 DC에서 원형 차트를 그리기 위해 다음 단계를 따르십시오.

1 단계 : 스크립트 포함

다음 코드를 사용하여 D3, DC 및 Crossfilter를 추가하겠습니다.

<script src = "js/d3.js"></script>
<script src = "js/crossfilter.js"></script>
<script src = "js/dc.js"></script>

2 단계 : 변수 정의

유형의 개체를 만듭니다. dc.pieChart 아래와 같이-

var pieChart = dc.pieChart('#pie');

여기서 파이 ID는 파이와 매핑됩니다.

3 단계 : 데이터 읽기

다음을 사용하여 데이터 (예 : people.csv)를 읽습니다. d3.csv()함수. 다음과 같이 정의됩니다-

d3.csv("data/people.csv", function(errors, people) {
   console.log(people);
}

여기에서 지정된 위치에서 데이터 파일을 사용할 수없는 경우 d3.csv () 함수는 오류를 반환합니다.

4 단계 : 교차 필터 정의

Crossfilter에 대한 변수를 정의하고 데이터를 Crossfilter에 할당합니다. 아래에 정의되어 있습니다-

var mycrossfilter = crossfilter(people);

5 단계 : 차원 생성

아래 함수를 사용하여 성별에 대한 차원을 만듭니다.

var genderDimension = mycrossfilter.dimension(function(data) { 
   return data.gender; 
});

여기에서는 사람들의 성별이 차원에 사용됩니다.

6 단계 : reduceCount ()

위에서 만든 성별 측정 기준에 group () 및 reduceCount () 함수를 적용하여 교차 필터 그룹을 만듭니다. groupDimension.

var genderGroup = genderDimension.group().reduceCount();

7 단계 : 파이 생성

아래 함수를 사용하여 파이 생성-

pieChart
   .width(800)
   .height(300)
   .dimension(genderDimension)
   .group(genderGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

dc.renderAll();

여기,

원형 차트의 너비는 800으로 설정됩니다.
원형 차트의 높이는 300으로 설정됩니다.
원형 차트의 차원이 다음으로 설정됩니다. genderDimension dimension () 메서드를 사용합니다.
원형 차트의 그룹이 다음으로 설정됩니다. genderGroup group () 메서드를 사용합니다.
DC.js 내장 이벤트를 사용하여 데이터를 기록하는 클릭 이벤트를 추가했습니다. renderlet(). 차트가 렌더링되거나 그려 질 때마다 렌더 렛이 호출됩니다.

8 단계 : 작업 예

새 html 파일 pie.html을 만들고 아래 표시된대로 위의 모든 단계를 포함합니다.

<html>
   <head>
      <title>DC.js Pie Chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div id = "pie"></div>
      </div>

      <script language = "javascript">
         var pieChart = dc.pieChart('#pie');

         d3.csv("data/people.csv", function(errors, people) {
            console.log(people);
            var mycrossfilter = crossfilter(people);

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

            pieChart
               .width(800)
               .height(300)
               .dimension(genderDimension)
               .group(genderGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });

            dc.renderAll();
         });
      </script>
   </body>
</html>

이제 브라우저를 요청하면 다음과 같은 응답이 표시됩니다.