DC.js-막대 차트

막대 차트는 가장 일반적으로 사용되는 그래프 유형 중 하나이며 서로 다른 개별 범주 또는 그룹에 대한 숫자, 빈도 또는 기타 측정 값 (예 : 평균)을 표시하고 비교하는 데 사용됩니다. 그래프는 다른 막대의 높이 또는 길이가 나타내는 범주의 크기에 비례하도록 구성됩니다.

x 축 (가로축)은 배율이없는 다른 범주를 나타냅니다. y 축 (세로축)에는 눈금이 있으며 측정 단위를 나타냅니다. 막대는 범주 수와 범주의 길이 또는 복잡성에 따라 세로 또는 가로로 그릴 수 있습니다.

막대 차트 방법

막대 차트를 그리기 위해 이동하기 전에 dc.barChart클래스 및 메서드. dc.barChart는 믹스 인을 사용하여 차트를 그리는 기본 기능을 얻습니다. dc.barChart에서 사용하는 믹스 인은 다음과 같습니다.

  • dc.stackMixin
  • dc.coordinateGridMixin

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

dc.barChart는 위에서 지정한 믹스 인의 모든 메서드를 가져옵니다. 또한 막대 차트를 그리는 자체 방법도 있습니다. 그들은 다음과 같이 설명됩니다-

alwaysUseRounding ([라운드])

이 메서드는 막대가 중앙에있을 때 반올림을 사용할지 여부를 가져 오거나 설정하는 데 사용됩니다.

barPadding ([패드])

이 방법은 막대 크기의 일부로 막대 사이의 간격을 가져 오거나 설정하는 데 사용됩니다. 가능한 패딩 값은 0-1입니다.

centerBar ([centerBar])

이 방법은 x 축의 데이터 위치를 중심으로 막대를 설정하는 데 사용됩니다.

간격 ([간격])

이 방법은 철근 사이에 고정 된 간격을 설정하는 데 사용됩니다.

outerPadding ([패드])

이 메서드는 순서 막대 차트에서 바깥 쪽 안쪽 여백을 설정하는 데 사용됩니다.

막대 차트 그리기

DC에서 막대 차트를 그리겠습니다. 이렇게하려면 아래 단계를 따라야합니다.

1 단계 : 변수 정의

아래와 같이 차트 변수를 정의하겠습니다.

var chart = dc.barChart('#bar');

여기서 dc.barChart 함수는 bar 이드로.

2 단계 : 데이터 읽기

people.csv 파일에서 데이터를 읽습니다.

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

데이터가 없으면 오류를 반환합니다. 이제 데이터를 Crossfilter에 할당합니다. 이 예에서는 다음과 같은 동일한 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
..................
..................
..................

3 단계 : 연령 측정 기준 만들기

이제 아래와 같이 나이에 대한 차원을 만듭니다.

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

여기서는 Crossfilter 데이터에서 나이를 할당했습니다. ~~는 이중 NOT 비트 연산자입니다. 더 빠른 대체물로 사용됩니다.Math.floor() 함수.

이제 reduceCount() 아래에 표시된 기능-

var ageGroup = ageDimension.group().reduceCount();

4 단계 : 차트 생성

이제 아래에 주어진 코딩을 사용하여 막대 차트를 생성하십시오.

chart
   .width(800)
   .height(300)
   .x(d3.scale.linear().domain([15,70]))
   .brushOn(false)
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .dimension(ageDimension)
   .group(ageGroup)
   .on('renderlet', function(chart) {
      chart.selectAll('rect').on('click', function(d) {
         console.log('click!', d);
      });
   });

chart.render();

여기,

  • 차트 너비는 800이고 높이는 300입니다.

  • d3.scale.linear 함수는 지정된 도메인 범위 [15, 70]로 새로운 선형 척도를 생성하는 데 사용됩니다.

  • 다음으로 brushOn 값을 false로 설정합니다.

  • y 축 레이블을 개수로 할당하고 x 축 레이블을 나이로 할당합니다.

  • 마지막으로 ageGroup 함수를 사용하여 나이를 그룹화합니다.

5 단계 : 작업 예

전체 코드 목록은 다음과 같습니다. 웹 페이지 만들기bar.html 다음 변경 사항을 추가하십시오.

<html>
   <head>
      <title>DC Bar 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 = "bar"></div>
      </div>

      <script language = "javascript">
         var chart = dc.barChart('#bar');

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

            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            chart
               .width(800)
               .height(300)
               .x(d3.scale.linear().domain([15,70]))
               .brushOn(false)
               .yAxisLabel("Count")
               .xAxisLabel("Age")
               .dimension(ageDimension)
               .group(ageGroup)
               .on('renderlet', function(chart) {
                  chart.selectAll('rect').on('click', function(d) {
                     console.log('click!', d);
                  });
               });
            chart.render();
         });
      </script>
   </body>
</html>

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