DC.js-시리즈 차트

시리즈는 데이터 집합입니다. 데이터를 기반으로 차트를 그릴 수 있습니다. 이 장에서는 시리즈 차트를 그리는 방법에 대해 자세히 설명합니다.

시리즈 차트 방법

시리즈 차트를 그리기 전에 다음 사항을 이해해야합니다. dc.seriesChart클래스와 그 방법. dc.seriesChart는 Mixins를 사용하여 차트를 그리는 기본 기능을 얻습니다. dc.seriesChart에서 사용하는 믹스 인은 다음과 같습니다.

  • dc.stackMixin

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

dc.seriesChart는 위에서 지정한 믹스 인의 모든 메서드를 가져옵니다. 시리즈 차트를 그리는 자체 방법이 있으며 아래에 설명되어 있습니다.

차트 ([함수])

이 메서드는 차트 기능을 가져 오거나 설정하는 데 사용됩니다.

seriesAccessor ([접속자])

표시된 시리즈에 대한 접근 자 기능을 가져 오거나 설정하는 데 사용됩니다.

seriesSort ([sortFunction])

이 메서드는 계열 값을 제공하여 계열 목록을 정렬하는 함수를 가져 오거나 설정하는 데 사용됩니다.

valueSort ([sortFunction])

이 방법은 각 계열의 값을 정렬하는 함수를 가져 오거나 설정하는 데 사용됩니다.

시리즈 차트 그리기

DC에서 시리즈 차트를 그리겠습니다. 이 예에서는 people_hw.csv라는 이름의 데이터 세트를 사용합니다. 샘플 데이터 파일은 다음과 같습니다-

id,name,gender,height,weight
1,Kinsley,Male,168,90
2,Dimitry,Male,177,61
3,Martica,Female,152,76
4,Brittni,Female,156,88
5,Phillip,Male,161,78
6,Sofie,Female,161,71
7,Avril,Female,163,55
8,Allistir,Male,161,75
9,Emelda,Female,154,66
10,Camella,Female,153,52

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

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

people_hw.csv

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

1 단계 : 변수 정의

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

var chart = dc.seriesChart('#line');

여기서 seriesChart 함수는 id 라인과 매핑됩니다.

2 단계 : 데이터 읽기

people_hw.csv 파일에서 데이터 읽기-

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

데이터가 없으면 오류를 반환합니다. 이제 데이터를 교차 필터에 할당합니다. 데이터를 얻으면 하나씩 검색하고 아래에 주어진 코딩을 사용하여 성별을 확인할 수 있습니다.

people.forEach(function(x) {
   if(x.gender == 'Male') {
      x.newdata = 1;
   } else {
      x.newdata = 2;
   }
});

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

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

var hwDimension = mycrossfilter.dimension(function(data) { 
   return [data.gender, data.height];
});

여기에서 차원을 할당했으며 성별과 키를 반환합니다. 이제reduceCount() 아래 정의 된 함수-

var hwGroup = hwDimension.group().reduceCount();

4 단계 : 차트 생성

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

chart
   .width(800)
   .height(600)
   .chart(function(c) { 
      return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true); 
   })
   
   .x(d3.scale.linear().domain([145,180]))
   .elasticY(true)
   .brushOn(false)
   .xAxisLabel("Height")
   .yAxisLabel("Count")
   .dimension(hwDimension)
   .group(hwGroup)
   .seriesAccessor(function(d) { return d.key[0];})
   .keyAccessor(function(d) { return +d.key[1]; })
   .valueAccessor(function(d) { return +d.value; })
   legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1).legendWidth(120)\
      .itemWidth(60));

chart.render();

여기,

  • 차트 너비는 800이고 높이는 600입니다.
  • d3.scale.linear () 메서드를 사용하여 도메인 값을 지정합니다.
  • seriesAccessor 함수를 사용하여 데이텀에 대한 시리즈를 표시합니다.
  • 키 및 값 접근자는 계열에서 키와 값을 반환합니다.
  • 범례를 사용하여 높이와 너비를 추가 할 수 있습니다.

5 단계 : 작업 예

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

<html>
   <head>
      <title>Series chart Sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.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 = "line"></div>
      </div>

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

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

            people.forEach(function(x) {
               if(x.gender == 'Male') {
                  x.newdata = 1;
               } else {
                  x.newdata = 2;
               }
            });

            var hwDimension = mycrossfilter.dimension(function(data) { 
               return [data.gender, data.height];
            });
            var hwGroup = hwDimension.group().reduceCount();

            chart
               .width(800)
               .height(600)
               .chart(function(c) { 
                  return dc.lineChart(c).interpolate('cardinal').evadeDomainFilter(true);
               })
               .x(d3.scale.linear().domain([145,180]))
               .elasticY(true)
               .brushOn(false)
               .xAxisLabel("Height")
               .yAxisLabel("Count")
               .dimension(hwDimension)
               .group(hwGroup)
               .seriesAccessor(function(d) { return d.key[0];})
               .keyAccessor(function(d) { return +d.key[1]; })
               .valueAccessor(function(d) { return +d.value; })
               .legend(dc.legend().x(350).y(500).itemHeight(13).gap(5).horizontal(1)
                  .legendWidth(120).itemWidth(60));

            chart.render();
         });
      </script>
   </body>
</html>

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