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>

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